Web サイトのヘッダー バーを作成しています。このヘッダー バーは、[戻る] ボタン、[学校情報]、および [ログイン] ボタンの 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