我正在尝试垂直对齐 2 个 div。一个定义的大小带有背景图像,另一个是多行文本(上面有一个 :before 元素)。我无法完全控制数量,因为这取决于屏幕的宽度。
HTML
<div class="brand-wrap">
<a class="navbar-brand" href="<?php echo home_url(); ?>"></a>
<div class="brand-text">
<p>test text text text text text text ...</p>
</div>
</div>
CSS
.navbar-brand {
display: inline-block;
margin-top: 10px;
padding: 0;
height: 60px;
width: 60px;
background: url('img/logo_orig.png') no-repeat center center;
background-size: auto 100%;
}
.brand-wrap {
display: inline-block;
}
.brand-text {
position: relative;
font-size: 12px;
display: inline-block;
color: #fff;
}
.brand-text:before {
content: '';
display: block;
width: 50px;
height: 3px;
position: absolute;
left: 0;
top:-7px;
background-color: red;
}
我所拥有的使它彼此并排,但不居中。我想要“文本”div 没有定义高度的东西。
最佳答案
可以使用flexbox来解决这个问题。你没有提供一个活生生的例子,但这是我的想象:
*{
box-sizing:border-box;
}
#wrapper{
background-color: #333333;
padding: 5px;
display:flex;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
flex-direction: row;
align-items: center;
}
#navbar{
width: 60px;
min-width: 60px;
height: 60px;
background-color: #EE4433;
border: 2px dashed white;
}
#other{
color: white;
margin-left: 5px;
border: 2px dashed white;
}
<div id="wrapper">
<div id="navbar"></div>
<div id="other">
<a class="navbar-brand" href="<?php echo home_url(); ?>"></a>
<div class="brand-text">
<p>test text text text text text text ...test text text text text text text ...test text text text text texttest text text text text text text ...test text text text text text text ...test text text text text text</p>
</div>
</div>
</div>
只需使用align-items: center;
关于html - 垂直对齐 div - 未知高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31930516/