Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Margin 0 auto to a span within div not working

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

enter image description here

like image 642
Faisal Avatar asked Oct 28 '14 15:10

Faisal


People also ask

Why margin is not working in span tag?

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?

How do you use margin 0 auto?

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 ...

Does span have margin?

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.

How do you put a margin inside a div?

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.


1 Answers

To center horizontal with margin the element must have a fixed width.

Since you are using inline-block Try this:

div {
  text-align:Center;
}
like image 54
DaniP Avatar answered Sep 28 '22 02:09

DaniP