如何使用引导程序 3 在面板中垂直对齐文本答案

【问题标题】：How to align text vertically in panel using bootstrap 3如何使用引导程序 3 在面板中垂直对齐文本
【发布时间】：2017-11-18 09:51:09
【问题描述】：

我有一张panel panel-default 的图片和描述。图片拉到左边，描述在右边。

图像具有img-responsive 类，因此当我调整窗口大小时，它适合面板主体。

问题是我怎样才能达到与描述相同的效果。我想将它垂直对齐到面板，当我调整窗口大小时，它也应该适合面板主体。

到目前为止我所尝试的：

.container {
  padding-top: 30px;
}

p {
  font-size: 2vw;
}

.panel {
  border-radius: 0;
}

.panel-body {
  padding: 0;
}

.panel-description {
  margin-top 12px;
  padding-left: 3px;
}

.vertical-center {
  display: flex;
  align-items: center;
}

.no-padding {
  padding: 0;
}

.no-padding-right {
  padding-right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-4 col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">
          Basic panel example
        </div>
      </div>
    </div>
    <div class="col-sm-4 col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="row">
            <div class="col-sm-4 col-md-4 no-padding-right">
              <div class="panel-image">
                <img src="http://via.placeholder.com/150x150" class="img-responsive" alt="img">
              </div>
            </div>
            <div class="col-sm-8 col-md-8 no-padding">
              <div class="panel-description vertical-center">
                <p>Name<br>Surname</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4 col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">
          Basic panel example
        </div>
      </div>
    </div>
  </div>
</div>

我加了

.vertical-center {
   display: flex;
   align-items: center;
}

到.panel-description，但它不起作用。

这个问题的最佳解决方案是什么？

https://jsfiddle.net/DTcHh/39282/

【问题讨论】：

对于文本，您始终可以使用媒体查询或百分比来使其具有响应性，至于面板描述，问题在于您的 HTML 结构。
结构有什么问题？
你需要把flex放在包含你要定位的所有元素的div中。
我把它放在描述 div 中，因为这是我想要居中的元素

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我对您的代码几乎没有改动，现在它运行良好。这是更新的代码供您参考

.container {
  padding-top: 30px;
}

p {
  font-size: 2vw;
}

.panel {
  border-radius: 0;
}

.panel-body {
  padding: 0;
}

.panel-description {
  margin-top 12px;
  padding-left: 3px;
}

.no-padding-right {
  padding-right: 0;
}

.main-class {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
}

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">
          Basic panel example
        </div>
      </div>
    </div>
    <div class="col-sm-4 col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="row">
            <div class="main-class">
                <div class="col-sm-4 col-md-4 no-padding-right">
                  <div class="panel-image">
                    <img src="http://via.placeholder.com/150x150" class="img-responsive" alt="img">
                  </div>
                </div>
                <div class="col-sm-8 col-md-8 no-padding">
                  <div class="panel-description vertical-center">
                    <p>Name<br>Surname</p>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4 col-lg-4">
      <div class="panel panel-default">
        <div class="panel-body">
          Basic panel example
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：