Bootstrap:如何在div中垂直居中p元素?

时间:2017-12-16 16:35:50

标签: html css twitter-bootstrap

如何在此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>

4 个答案:

答案 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>