2

I cannot for the life of me get the contents of the center div to align no matter what I try:

HTML

<div class="content-controls">
    <div class="content-controls-left">
        123
    </div>
    <div class="content-controls-middle">
        <img src="logo.png">
    </div>
    <div class="content-controls-right">
        456
    </div>
</div>

CSS

.content-controls {
    width:100%;
}
.content-controls-left {
    float:left;
    width:50px;
}
.content-controls-right {
    float:right;
    width:35px;
}
.content-controls-middle {
    float:left;
    margin:auto 0;
}

What I would like to happen is that the image in the middle column is always centred in content-controls-middle - I have tried suggestions in:

  1. CSS: center element within a <div> element
  2. How do I put 3 div's side by side and center the content in each one
  3. Three DIVs next to each other with fluid horizontal width
  4. Align image in center and middle within div

and more but all to no avail - what am I doing wrong?

http://jsfiddle.net/8VS5U/

Community
  • 1
  • 1
bhttoan
  • 2,641
  • 5
  • 42
  • 71
  • Add this to middle div: margin-left:40%; – Ali Gajani May 28 '14 at 12:56
  • Should the middle div take up the rest of the space? [DEMO](http://jsfiddle.net/8VS5U/1/) – Ruddy May 28 '14 at 12:56
  • 1
    when you could consider changing your html, you can do this: http://jsfiddle.net/8VS5U/6/ – Nico O May 28 '14 at 12:59
  • @NicoO Your suggestion worked best for me - the others worked fine in the fiddles but I assume there is something else in the remaining code not shown here within my site which stopped those from working but this works, thanks – bhttoan May 28 '14 at 13:21
  • @bhttoan NicoO's one is the same as mine. They just put an image in the middle instead of text. – Ruddy May 28 '14 at 13:23

3 Answers3

1

You'd be better off using a table layout if your middle cell will only contain inline content (which an image is):

/* Set container to display as a table. */
.content-controls {
    display: table;
    table-layout: fixed;
    width:100%;
}

/* Set div elements within container to display as table cells. */
.content-controls div {
    display: table-cell;
}

.content-controls-left {
    width:50px;
}
.content-controls-right {
    width: 35px;
}

/* Centrally align middle cell content. */
.content-controls-middle {
    text-align: center;
}

JSFiddle demo.

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
1

You can change your CSS like this, it will allow the middle div to take the remainer space so you can just text-align the content.

CSS:

.content-controls {
    width:100%;
}
.content-controls-left {
    float:left;
    width:50px;
}
.content-controls-right {
    float:right;
    width:35px;
}
.content-controls-middle {
    text-align: center;
}

And you must change the HTML like so:

HTML:

<div class="content-controls">
    <div class="content-controls-left">123</div>
    <div class="content-controls-right">456</div>
    <div class="content-controls-middle">ABC</div>
</div>

DEMO HERE

Ruddy
  • 9,795
  • 5
  • 45
  • 66
0

Try this: margin-left:40%; on your .content-controls-middle.

enter image description here

http://jsfiddle.net/8VS5U/7/

As James points out, if you make the window smaller, it won't be central. But this is good enough if you are not making a responsive website. I would prefer James' answer if you want a solid approach, and mine if you want a hacky way to do it :)

Ali Gajani
  • 14,762
  • 12
  • 59
  • 100