I'd call a span within a div, its taking margins but margin:0 auto is not working. 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;
}
Output Required
Since span tags are inline, not block elements. They can only take margin left and right, not top and bottom. See this related post, Margin-Top not working for span element?
By setting for example: margin-left: 50px you'll force your browser to set that empty space to the left from your element, on the other hand, using margin: 0 auto; will tell the browser something like this: “I don't want any empty space from the top and the bottom, but I want to have as much empty space from my left ...
The SPAN system, through its algorithms, sets the margin of each position in a portfolio of derivatives and physical instruments to its calculated worst possible one-day move.
Use the padding css property of the container (div) instead. Padding is the space inside and border of the element, while margin is the space outside the border of the element. Check out box model.
To center horizontal
with margin
the element must have a fixed width
.
Since you are using inline-block
Try this:
div {
text-align:Center;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With