使用display时，span元素的宽度不会增加。

Question

I want to center a span-element in an container div. The span-element is preceeded by another div.

here is my code:

<div id="container">
    <div id="a">A</div>
    <span id="b">B</span>
</div>

#container {
    display:flex;

    background-color:#0AA;
    text-align:center;
}

#a {
    width:70%;
    background-color:#AA0;
}

and on jsfiddle: http://jsfiddle.net/pbek7av3/1/

I tried it with text-align:center and margin:auto, but sadly this doesn't work.

edit: This would be another approach: http://jsfiddle.net/pbek7av3/2/ Is there something like width:auto; to let div b take the remaining space fo the parent container?

Answer 1

You are using display: flex; for the parent, so span being an inline element, use flex: 1; which is nothing but grow for the flex item like

#b {
    flex: 1; /* Or flex-grow: 1; */
}

Demo (Missed out the declaration in previous demo #3 so updated again)

Note that flex is not supported in older versions of IE as well as other popular browsers so if you are interested in the browser support than take a look at CanIUse : Flexbox for more details.

---

Test case without flex: 1; or flex-grow: 1;

With flex: 1; or flex-grow: 1;

Answer 2

If you know that there are only two element which is getting entire width ie one your div width:70% , then you can easily give the remaining width:30% to the span like this

#b {
    text-align:center;
    width:30%;
}

Js Fiddle Demo