我正在嘗試創建一個將在主div後面有一行的橫幅/標題。我想如圖所示線和絲毫不差,以在中間(垂直)的文本:將hr與文本垂直排列在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列,我可以使用類似下面的代碼片段。問題是,在這條線:
高度:100像素; line-height:100px;
我想要的高度爲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>
有很多方法可以做到這一點。你在第二個版本之前完成了這個:before&:之後。試試這個#child {display:table-cell; vertical-align:middle;寬度:繼承;}。 – AmitV
@ Amit1992我對CSS有一些限制。第一個答案正常工作:D謝謝大家 –