3
メインディビジョンの後ろにラインを持つバナー/ティットルを作成しようとしています。私が示すように、（垂直）ラインと点画のテキストが中央になりたい：divとdivの後ろにテキストを合わせて整列する
を問題は、私は、ブラウザのサイズ、hrやテキストを変更した場合ということです（垂直方向に）整列していない。以下は、最初のバージョンである：
.section {
\t clear: both;
\t padding: 0px;
\t margin: 0px;
}
.col {
text-align:center;
\t display: block;
\t float:left;
\t margin: 1% 0 1% 0%;
}
.col:first-child { margin-left: 0; }
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.66%; }
.span_1_of_3 { width: 33.33%; }
@media only screen and (max-width: 480px) {
\t .col { margin: 1% 0 1% 0%; }
\t .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
#middle
{
background:#CCC;
color:#FC3699;
height:100px;
margin-top:0;
line-height:100px;
}
hr {
margin-top:40px;
border:2px solid #FC3699;
}<div class="section group">
\t <div class="col span_1_of_3">
\t \t <div class="topsection">
\t \t \t <div class="header"><hr /></div>
\t \t </div>
\t </div>
\t <div id="middle" class="col span_1_of_3">
\t \t aaaaaaa
\t </div>
\t <div class="col span_1_of_3">
\t \t <div class="topsection">
\t \t \t <div class="header"><hr /></div>
\t \t </div>
\t </div>
</div>そしてここでは、第二版です。 3つの列を持つ代わりに、以下のスニペットのようなものを使用できます。問題は次の行にあります。
高さ：100px; 行の高さ：100ピクセル。
高さを100％にしたい。しかし、行の高さができない：
.main {
height:100%;
min-height:100px;
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
}
.main > span {
width:200px;
height:100px;
line-height: 100px;
background:#F1F1F1;
position: relative;
display: inline-block;
}
\t
.main > span:before,
.main > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 3px;
background: #FC3699;
}
.main > span:before {
right: 100%;
margin-right: 15px;
}
.main > span:after {
left: 100%;
margin-left: 15px;
}<div class="main">
<span style="vertical-align: middle;">Text</span>
</div>ここで私はテキストのみをtext-aling:center;する必要が三、最高のバージョンがあります。しかし、私はCSSでそれを追加しても、それが理由で動作しません：
.main {
height:100%;
min-height:100px;
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
}
.main > span {
width:200px;
height:100px;
line-height: 100px;
background:#F1F1F1;
position: relative;
display: inline-block;
}
\t
.main > span:before,
.main > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 3px;
background: #FC3699;
}
.main > span:before {
right: 100%;
}
.main > span:after {
left: 100%;
}
#child {
display: table-cell;
vertical-align: middle;
}<div class="main">
<span><div id="child">Text</div></span>
</div>
これを達成する方法はたくさんあります。あなたはこれを2番目のバージョンで＆：afterの後に実行しました。この#childを試してください{display：table-cell; vertical-align：middle;幅：継承;} – AmitV
@ Amit1992私はCSSに関していくつかの制限がありました。最初の答えはうまくいきます：Dありがとうございました –