3

我正在为网站制作标题栏。此标题栏由 3 个部分组成：返回按钮、学校信息和登录按钮。问题是中心 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

4

2 回答 2

3

穿上text-align: center父 div 将解决此问题。您现在拥有的内容将 div 中的文本居中，该文本应该已经居中。

见：http: //jsfiddle.net/AJmSw/

内联块元素将根据父容器文本对齐来定位。两个侧面的 div 都浮动，这将正常工作。

或者，display: inline-block从中心 div 中删除规则将使 divmargin: 0 auto;居中也可以生效，请参见：http: //jsfiddle.net/b4mWU/

于 2013-08-01T16:23:32.273 回答
0

引导程序很愚蠢。有一个 CSS 问题在我的雷达下飞行。谢谢你们的帮助。

于 2013-08-01T19:32:46.657 回答