我正在建立一个平面设计的网站.我有一个标题,下面有两个不同颜色的块,彼此相邻.我尝试左右浮动,但建议使用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>
解决方法
将列的显示类型更改为表格单元格可能会导致问题(例如,对于表格单元格元素,相对定位的效果未定义)另一种选择是在列中添加全高(伪)元素并将其与<跨度>通过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 */
}
有关详细信息,请参阅此处的my answer.
