【问题标题】:Bootstrap: How to center a p Element vertically in a div?Bootstrap:如何在 div 中垂直居中 p 元素?
【发布时间】:2018-05-30 13:50:08
【问题描述】:

如何在此 div 中垂直居中多个 Line p 元素,同时将其保持在页面左侧?

我已经尝试将父 div 显示为表格,但这似乎在引导 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>

【问题讨论】:

标签: html css twitter-bootstrap


【解决方案1】:

由于您使用的是 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>

【讨论】:

  • 感谢帮助!我现在要深入研究 flexbox 表单!
  • @Fabian Zbinden 强烈推荐! flexbox 的强大功能使您的标记更清晰,样式更一致。这是我的 goto 指南:css-tricks.com/snippets/css/a-guide-to-flexbox
【解决方案2】:
   <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>

【讨论】:

  • 这实际上水平和垂直居中。
【解决方案3】:

您可以使用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>

【讨论】:

    【解决方案4】:

    试试这个:

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

    【讨论】:

    • 你应该检查你的答案; .col-*.row 不应按照您建议的方式组合。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-06-14
    • 2020-12-16
    • 1970-01-01
    • 2022-07-19
    • 2017-07-12
    • 2015-04-05
    • 2020-11-13
    相关资源
    最近更新 更多