Clever Geek Handbook

Margin 0 auto for a range in a div doesn't work

I would call the span on a div and it took margins, but margin: 0 auto doesn't work. Any suggestion?

Html

<div>
    <span>
         <h3>Paris Eurostar Breaks</h3>
         <p>Curabitur fringilla mauris interdum nec magna</p>
    </span>
</div>

CSS

div{
    width:465px;
    min-height:201px;
}
div span{
    display:inline-block;
    color:#FFF;
    border-bottom:1px #FFF solid;
    border-top:1px #FFF solid;
    margin:0 auto;  
}

Withdrawal required

enter image description here

+3


source to share


3 answers


The center horizontal

with the margin

element must be fixed width

.

Since you are using inline-block

Try this:



div {
  text-align:Center;
}
+8


source


margin: 0 auto

will center horizontally block-level elements, but not inline block-level elements:

10.3.3 Blocked, unreplaced items in normal flow

If both "margin-left" and "margin-right" are "auto", their used values ​​are equal. This horizontally centers the element in relation to the edges of the containing block.

10.3.9 'Inline-block', non-replaceable elements in normal flow

The computed value "auto" for "margin-left" or "margin-right" becomes the used value "0".

To center inline-block

, you can add text-align: center

to your container.



div{
  width:465px;
  min-height:201px;
  text-align: center;
}
div span{
  display:inline-block;
  border-bottom:1px solid;
  border-top:1px solid;
  margin:0 auto;  
}
      

        
        
        
      

    
<div>
    <span>
         <h3>Paris Eurostar Breaks</h3>
         <p>Curabitur fringilla mauris interdum nec magna</p>
    </span>
</div>
Run code


+5


source


You need to change display

to block

and then add width to your range. Fiddle

0


source






More articles:


All Articles