我正在建立一个平面设计的网站.我有一个标题,下面有两个不同颜色的块,彼此相邻.我尝试左右浮动,但建议使用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"> …