如何在此div中垂直居中这个多行p元素,同时将其保持在页面的左侧?
我已经尝试将父div显示为表格,但这似乎在bootstrap css中标记为!important。
谢谢!
<div class="row">
<div class="col-3">
<img src="images/pk1.jpg" alt="Telefon">
</div>
<div class="col-9">
<p>asdadadas<br>asdasdasad</p>
</div>
</div>
答案 0 :(得分:0)
试试这个:
<div class="row">
<div class="col-3">
<img src="images/pk1.jpg" alt="Telefon">
</div>
<div class="col-9 text-center">
<p>asdadadas<br>asdasdasad</p>
</div>
</div>
答案 1 :(得分:0)
<div class="row">
<div class="col-sm-3">
< img src="images/pk1.jpg" alt="Telefon">
</div>
<div class="col-sm-9 text-center">
<p>example</p>
</div>
</div>
答案 2 :(得分:0)
由于您使用的是v4,请使用flexbox!
Align items vertically with Bootstrap v4
<div class="row">
<div class="col-3">
<img src="images/pk1.jpg" alt="Telefon">
</div>
<div class="col-9 d-flex align-items-center">
<p>asdadadas<br>asdasdasad</p>
</div>
</div>
答案 3 :(得分:0)
您可以使用flex
技术来实现与单选择器的垂直居中对齐。
.vertical-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
在标记中应添加此CSS选择器:
<div class="row">
<div class="col-3">
<img src="images/pk1.jpg" alt="Telefon">
</div>
<div class="col-9 vertical-center">
<p>asdadadas<br>asdasdasad</p>
</div>
</div>