これを行う方法の 1 つを次に示します。HTML は良好です。何も変更する必要はありません。
CSS の場合:
.body { width: 920px; }
.banner {
background-color: #454545;
border-bottom: 3px solid #F9F9F9;
height: 100px;
margin: 0 0 5px;
padding: 0;
display: table;
}
.banner > div {
outline: 1px dotted yellow; /* optional to show cell edges... */
display: table-cell;
}
.banner .name {
width: 25%;
vertical-align: top;
padding-top: 25px; /* control top white space */
text-align: center;
}
.banner .name h2 {
color: #F9F9F9;
max-height: 55px;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.banner .title {
width: 50%;
vertical-align: top;
padding-top: 25px;
}
.banner .title h3 {
font-size: 15px;
font-weight: bold;
line-height: 15px;
margin: 0px 0 0 0;
padding: 0;
}
.banner .title p {
font-size: 12px;
max-height: 35px;
overflow: hidden;
margin: 0;
padding: 0;
}
.banner .link {
width: 25%;
vertical-align: middle;
text-align: left; /* set to left, center or right as needed */
}
.banner .link a {
margin-left: 25px; /* controls left offset */
background-color: #FA9800;
border-radius: 5px 5px 5px 5px;
cursor: pointer;
display: inline-block; /* use inline-block if you want to center element */
font-size: 12px;
font-weight: bold;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
width: 100px;
}
次のフィドルを参照してください: http://jsfiddle.net/audetwebdesign/jsG8F/
仕組み
トリックは、コンテナで使用display: table
してから子要素で使用し、 、 、の % 幅をそれぞれ 25%、50%、25% に設定することです。.banner
display: table-cell
div
.name
.title
.link
vertical-align
次に、とを使用しtext-align
て、さまざまなテキスト ブロックの垂直方向および水平方向の配置を制御できます。
padding-top
バナーの上部から空白を制御するために使用することに関連するコメントを追加しました。
要素については、.link a
必要に応じて左マージン (または右マージン) を調整できます。
これらの CSS ルールにより、バナー内のさまざまな要素の配置を細かく制御できます。
下位互換性
このdisplay: table-cell
プロパティは、IE8 まで後方互換性があります。
参照: https://developer.mozilla.org/en-US/docs/Web/CSS/display