さて、私は自分が取り組んでいるプロジェクトのウェブサイトを作り始めました。現在、自分のWebサイトのレイアウトを整理していますが、ナビゲーションバーでスタックしています。
ナビゲーションバーをWebサイトの100%に広げ、ボタン(画像)を水平/垂直に中央に配置したいと思います。
私が持っているものはうまくいきます...しかし、私はそれを最も効率的な方法でやっているかどうか疑問に思っていますか?
これが私のhtmlです。
<div id="wrapper">
<div id="header">
<div id="navbar_left">
</div>
<div id="navbar_buttons">
<img src="../Originals/button_home.png" />
<img src="../Originals/button_logo.png" />
</div>
<div id="navbar_right">
</div>
</div>
</div>
これが私のCSSです:
#wrapper {
width: 100%;
margin: 0 auto;
padding: 0;
}
#header {
height: 123px;
width: 100%;
background-image: url(../../Originals/header_background.png);
}
#navbar_left {
width: 25%;
height: 123px;
float: left;
}
#navbar_buttons {
height: 123px;
width: 50%;
float: left;
line-height: 123px;
text-align:center;
}
#navbar_buttons::after {
content: ".";
visibility: hidden;
}
#navbar_right {
width: 25%;
height: 123px;
float: left;
}