Question

I’m trying to center some text in a div horizontally.

CSS:

#parent {
      background-color: #eee;
      height: 48px;
      text-align: center;
}
#colLeft {
      background-color: #ff8b8b;
      height: 48px;
      display: inline;
      float: left;
}
#colRight {
      background-color: #c3d0ff;
      height: 48px;
      display: inline;
      float: right;
}

HTML:

<div id="parent" style="width:100%">
      <div id="colLeft">left left left left</div>
      Title
      <div id="colRight">right</div>
 </div>

 <div style="width:100%; text-align:center">
      Title - this one is really centered.
 </div>

But it the text “Title” appears to get centered taking into account the space that #colLeft consumes, so it’s not really centered with respect to the browser width.

Is there a way that I can truly center the text, no matter how much space #colLeft takes up?

Answer 1

It’s not really recommended, but you could do something like this JS Fiddle.

#parent {
      background-color: #eee;
      height: 48px;
      text-align: center;
}
#colLeft {
      background-color: #ff8b8b;
      height: 48px;
      display: inline;
      float: left;
}
#colRight {
      background-color: #c3d0ff;
      height: 48px;
      display: inline;
      float: right;
}
.title{
    position: absolute;
    width: 100px;
    left: 50%;
    margin-left: -50px;
}

<div id="parent" style="width:100%">
      <div id="colLeft">left left left left</div>
    <div class="title">Title</div>
      <div id="colRight">right</div>
 </div>

 <div style="width:100%; text-align:center">Title - this one is really centered.</div>​

You make the title position:absolute. Give it a width. left: 50%. margin-left: minus half of the width. It will stay center. But I wouldn’t really recommend doing this…