Centering div element inside html header tag [closed]

问题

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 6 years ago.

I am trying to center my div element with class name toolbar and i have tried using the inline-block property on the div element and text-align: center on the header tag with no luck.

Here is the html

<header>
   <div class="toolbar">
   </div>
<header>

and the corresponding css stylings

 header{
    width: 100%;
    height: 51px !important;
    position: fixed;
    background-color: white;
    margin: 0 auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    z-index:100;
    top: 0;
    text-align: center;
}

.toolbar {
    background: #fff;
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 910px;
    margin: 0 auto;
    padding: 10px 25px;
    display: inline-block;
}

Having no luck centering the inner div element, with the current settings it moves it all the way to the right and if i remove the display on the div, it brings it to the left

回答1:

remove position: fixed and top: 0 as it is not needed ....

and change to display:block from the .toolbar class.

Here's a quick sample:

http://jsfiddle.net/Riskbreaker/QePqL/

if you don't want to remove position: fixed then:

http://jsfiddle.net/QePqL/1/

来源：https://stackoverflow.com/questions/14062991/centering-div-element-inside-html-header-tag