Jes*_*sen 9 html css alignment vertical-alignment
我正在建立一个平面设计的网站.我有一个标题,下面有两个不同颜色的块,彼此相邻.我尝试左右浮动,但建议使用display:inline-block.
不过,我遇到了一个问题.我想在左侧和右侧块的中间放置一些文本,并尝试使用align-items:center,但想到只有div设置为flex才有效.
所以我的问题是,我可以以某种方式保持我的内联块并让我的文本居中在我的块中间(水平和垂直)？
body {
margin: 80px 0 0;
}
#pagewrapper {
width: 100%;
}
#header {
width: 100%;
height: 80px;
background-color: #008B8B;
position: fixed;
top: 0;
}
.content-left,
.content-right {
width: 50%;
height: 500px;
color: #FFFFFF;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.content-left {
background-color: #66CC99;
}
.content-right {
background-color: #20B2AA;
}
#header-bot {
height: 800px;
background-color: #F8F8FF;
}
#footer {
height: 50px;
background-color: #AFEEEE;
}
.title {
font-size: 18px;
}<body>
<div id="pagewrapper">
<div id="header">
</div>
<!-- End of Header -->
<div class="content-left">
<span class="title">This is left Content</span>
</div>
<!-- End of Content Left -->
<div class="content-right">
<span class="title">This is Right Content</span>
</div>
<!-- End of Content Right -->
<div id="header-bot">
</div>
<!-- End of Header-Bot -->
<div id="footer">
</div>
<!-- End of Footer -->
</div>
<!-- End of PageWrapper -->
</body>Has*_*ami 13
更改列的显示类型table-cell可能会导致故障(例如,relative对于table-cell元素未定义定位的影响),另一个选择是在列中添加全高(伪)元素并<span>通过vertical-align: middle;声明垂直对齐该元素:
.content-left,
.content-right { text-align: center; } /* Align inline children horizontally */
.content-left:after, .content-right:after {
content: "";
display: inline-block;
vertical-align: middle; /* Align inline level elements vertically */
height: 100%;
}
.title {
vertical-align: middle; /* Align inline level elements vertically */
}
有关详细信息,请参阅此处的答案.