-5

HTML

<div class="contents">
    <p class="alignCenter"><!-- do not align to center-->
        <img src="http://i50.tinypic.com/1zey0j8.gif" />
    </p>
</div>

CSS

.contents p{text-align: justify;}
.alignCenter{text-align: center;}

When I change from <p> to <div> it works as it should, but why not the <p> element when centering an image?

See this Fiddle.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
luxi
  • 317
  • 1
  • 4
  • 17
  • 1
    There's a fight on up/down vote for this question. Personaly, I found it interesting. – Shikiryu Apr 09 '13 at 08:40
  • 1
    [Cross-referenced from Meta](http://meta.stackexchange.com/questions/175666/how-can-i-avoid-down-votes). – halfer Apr 09 '13 at 09:21

2 Answers2

5

<p> is indeed block level. Your problem is your CSS. The <p>s around your <img> tags are inside the <div id='content'>. id-based CSS outranks class-based CSS, all other things being equal.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
dnagirl
  • 20,196
  • 13
  • 80
  • 123
  • 2
    @user2253835, please take a look at this [link about CSS Specificity](http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/) – Miljan Puzović Apr 08 '13 at 13:16
  • "id-based css outranks class-based css, all other things being equal." I don't see any ids in the question... – BoltClock Apr 08 '13 at 15:11
  • @BoltClock: because the code (and the jsfiddle as well) changed the id-based CSS selector to a class based on (after the original post). The problem is still the same: the `.contents p` selector is more specific than the `.alignCenter` selector. – Joachim Sauer Apr 08 '13 at 16:07
  • @Joachim Sauer: If only I bothered to click the fiddle in the first revision. Thanks for the note. – BoltClock Apr 08 '13 at 16:09
-1

Add !important to your class to force your selector to work. That is,

.alignCenter{text-align: center !important;}

See this Fiddle.

See Stack Overflow question What is the difference between <p> and <div>? to view the difference between p and div.

Community
  • 1
  • 1
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231