为什么我的Div不会在其父元素中居中显示？

Question

我正在为一个网站制作页眉栏。该页眉栏由三个部分组成：返回按钮，学校信息和登录按钮。问题是中心div，即学校信息，无法居中。我尝试了我所知道的一切，但都没有效果。

以下是我的HTML和CSS代码:

/* -- Button Bar -- */

.buttonbarframe {
    width: 100%;
    background-color: #F1F1F1;
 border-bottom: 1px solid #D5D5D5;
 box-shadow: 1px 1px 2px #D5D5D5;
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 /*height: 65px;*/
 height: 45px;
 
    padding: 10px 0px 10px 0px;
}

/*#buttonbar {
    width: 100%;
 height: 45px;
 padding: 10px 0px 10px 0px;
}*/

.buttonbarspan {
    height: 100%;
}

.buttonbarspanindex {
    width: inherit;
    height: 100%;
 margin: 0px;
}

#buttonbarschoolimage {
    display: block;
    float: left;
 vertical-align: middle;
 height: 44px;
 border: 1px solid #D5D5D5;
}

#buttonbarschoolname {
    display: block;
 padding: 0px;
 margin-top: 4px;
 text-align: left;
 vertical-align: middle;
 float: left;
}

.buttonbarrightbutton {
    display: block;
    float: right;
}

.buttonbarsycamorelogo {
    margin: 0 auto;
    display: block;
 text-align: center;
 vertical-align: middle;
 height: 44px;
}

.schoolstuff {
    display: inline-block;  
    margin: 0 auto;
 text-align: center;
 vertical-align: middle;
 width: 341px;
}

.rightbutton {
    float: right;
}

.leftbutton {
    float: left;
}

<div class='buttonbarframe'>
    <div class='leftbutton buttonbarspan'>
        <a class='backbutton btn btn-large btn-danger' href=''><i class='icon-white icon-arrow-left'></i> Logout</a>
    </div>
    <div class='schoolstuff buttonbarspan'>
        <img id='buttonbarschoolimage' src='/Schools/$EntityValue/logo'>
        <h2 id='buttonbarschoolname'>Tri-County School</h2>
    </div>
    <div class='rightbutton buttonbarspan'>
        <input type='submit' class='buttonbarrightbutton btn btn-large btn-primary' href='parentcheckin.php' value='Login'>
    </div>
</div>

这是一个问题的示例。 问题的图像。http://www.overclock.net/image/id/6330507/width/900/height/900/flags/LL

- JT Nolan

Answer 1

在父级div上添加“text-align:center”样式可以解决此问题。您现在所拥有的内容将文本置于应已居中的div中心。

参见：http://jsfiddle.net/AJmSw/ inline-block元素将基于父容器的文本对齐方式进行定位。由于两侧div都是浮动的，因此这样做完全没有问题。

或者，如果从中央div中删除“display:inline-block”规则，则“margin:0 auto;”也将生效，并使div居中。

参见：http://jsfiddle.net/b4mWU/

- RyanS

---

自从什么时候有文本居中对齐？ - user1721135

这对我没有任何作用。我完全按照在jsfiddle上看到的做了，但什么也没发生。 - JT Nolan

检查一下 div，很可能是其他样式覆盖了它。 - RyanS

是的，我尝试过这两种方法。当某些东西在 jsfiddle 中可行但在其他地方不可行时，这真是令人沮丧。我正在使用 Twitter Bootstrap。这会引起问题吗？ - JT Nolan

我检查了div以及其所有子元素，似乎没有任何东西覆盖它。 - JT Nolan

如果没有其他CSS，则不应该影响Bootstrap。尝试隔离问题，将页面上的更多内容添加到编辑器中，直到您可以重新创建该问题，在此时您可以确定并修复它。 - RyanS

Answer 2

Bootstrap 真是太蠢了。有一个 CSS 问题一直没有被我发现。谢谢大家的帮助。

- JT Nolan

---

你能发布你的解决方案吗？ - Smith