将div元素居中于html标头标记中 [英] Centering div element inside html header tag

问题描述

我正在尝试将我的div元素以类名 toolbar 居中，并且尝试使用 inline-block div元素上的属性和标题标签上的 text-align：center 都没有运气。

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.

这里是html

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

以及相应的CSS样式

 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;
}

在内部div元素居中没有运气，使用当前设置它将其移动一路向右，如果我删除div上的显示，它将带到左侧

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

推荐答案

删除位置：固定和 top：0 ，因为不需要
....

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

，然后从 .toolbar 类更改为 display：block 。

这里有一个简单的示例：

Here's a quick sample:

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

如果您不想删除职位：固定然后：

http：// jsfiddle.net/QePqL/1/

这篇关于将div元素居中于html标头标记中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！