주 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>
높이 : 100px; 줄 높이 : 100px;
높이를 100 %로하고 싶습니다. 그러나 라인 높이는하지 수 : 만 text-aling:center;
텍스트에이 곳
.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>
flexbox
이 옵션은
.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>
이렇게하려면 여러 가지 방법이 있습니다. 당신은 이것을 다음과 같이했습니다 : & : after after in second version. 이 #child {디스플레이 : 표 셀; 세로 맞춤 : 가운데; 너비 : 상속;}. – AmitV
@ Amit1992 CSS 관련 몇 가지 제한 사항이 있습니다. 첫 번째 대답은 잘 작동합니다. D Thank you all –