Anthony Anthony - 4 months ago 6x
CSS Question

Centering a fixed width div flanked by two variable divs

I'm trying to set up a display that has an icon centered in a div. To the left and/or right is a variable amount of text. Example:

<div class="container">
<div class="left-text">This text is on the left</div>
<div class="icon-cell"><div class="icon smiley-face"></div></div>
<div class="right-text">And more text is over here...</div>

My goal would be for icon-cell to always be centered horizontally, presuming
has a
of 100%.

I was using a table for a little while, but it wasn't possible to do:

<td style="width:50%"></td>
<td style="width:48px"></td>
<td style="width:50%"></td>

Any ideas on how to do this without using Javascript?



You could use display: inline-block for the divs in conjunction with text-align: center:

.container {
    width: 100%;
    background: #eee;
    text-align: center;

.container > div {
    display: inline-block;

.container > .icon-cell {
    width: 50px;


There will occur problems, when you insert more text. Then you need to fix the width of your container-elements and eliminiate white-space between inline-blocks (I use font-size: 0). Here's another example:

More Text