0

I'm currently making a header for my webpage and well, the problem is that I can't seem to get my (what will be title image) to center inside the the image below shows my problem, Where the text: "Inlustra" is written, I would like that in the center of the Header.

Do you think I would be better off just using divs? if so how is this done? I had trouble even getting floating left and right divs earlier and then switched to an unordered list.

Here is my css: 

    #header {
    position:relative;
    -webkit-box-shadow: 0px 7px 30px rgba(50, 50, 50, 1);
    -moz-box-shadow:    0px 7px 30px rgba(50, 50, 50, 1);
    box-shadow:         0px 7px 30px rgba(50, 50, 50, 1);
    z-index:10;
    width:100%;
    height:40px;
    background-color: #FFFFFF;
    border-bottom:3px solid #1C6FFF;
}

.nav li {
    margin-left:-10px;
    display: inline-block;
    list-style: none;
    text-align: center;
    min-width:100px; width: auto !important; width: 100px;
}

.centerchild {
    width:150px;
    margin-left: auto;
    margin-right: auto;
    clear:both;
}

.firstchild {
    width:50px;
    float:left;
    text-align:left;
    margin-right:1.3em;
}

.lastchild {
    width:50px;
    float:right;
    margin-left:1.3em;
    text-align: right;
}

Here is my HTML:

 <div id="header"> 
                <ul class="nav">
                    <li class="firstchild"> <i class="icon-home icon-2x"> </i> </li>
                    <li class="firstchild"> <i class="icon-inbox icon-2x"> </i> </li>
                    <li class="lastchild"> <i class="icon-twitter icon-2x"> </i> </li>
                    <li class="lastchild"> <i class="icon-facebook icon-2x"> </i> </li>
                    <li class="centerchild"> TITLE OF PAGE </li>
                </ul>
            </div>

And here is the result http://imgur.com/IarX4bX

j08691
  • 204,283
  • 31
  • 260
  • 272
Thomas Nairn
  • 1,186
  • 8
  • 34
  • interesting. Try setting the `Inlustra` image as a background image isntead? You can center a background image – He Hui Apr 11 '13 at 02:49
  • The problem with that is that I wanted to have my image overflowing a little, something that won't be possible with a background image :/ – Thomas Nairn Apr 11 '13 at 13:05

1 Answers1

0

I don't like this answer myself, but going all 1995 and using tables will at least get the job done. Since in your example the width of the elements floated left and right won't change, you could do something like this:

(Using inline styles just for brevity)

<table style="width: 100%">
  <tr>
    <td style="width: 80px">Left</td>
    <td style="text-align: center">Center</td>
    <td style="width: 80px">Right</td>
  </tr>
</table>

I really want to believe that there's a more elegant way of doing this, and I'm using tables to bait somebody else into posting it :-)

Luxocrates
  • 221
  • 2
  • 4
  • Aha! http://stackoverflow.com/questions/3172738/centering-a-div-between-one-thats-floated-right-and-one-thats-floated-left – Luxocrates Jul 25 '13 at 18:47