将多行块居中，同时保持文本左对齐答案

【问题标题】：Centering a multi-line block while keeping text aligned left将多行块居中，同时保持文本左对齐
【发布时间】：2016-10-11 17:59:58
【问题描述】：

我尝试了各种不同的方法都无济于事，包括在<div> 上使用text-align: center; 和在<p> 和<h4> 上使用display: inline-block;。由于我在 div 中有 3 个不同的文本标签，我试图对齐这只会使文本看起来居中而不是左对齐。

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.media-body {text-align: center;}

p {display: inline-block}

h4 {display: inline-block;}

<div id="j2" class="jumbotron">
  <div class="container">
    <div class="row">
      <div id="block" class="col-sm-8 col-sm-offset-2">
        <div class="media-body">
          <p id="time">10:00 A.M.</p>
          <h4 class="media-heading"><b>Meet & Greet</b></h4>
          <p>Nametags, Swag, Refreshments</p>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap text alignment

【解决方案1】：

这是通常的解决方案：

#block {
  text-align: center;
}
.media-body {
  display: inline-block;
  text-align: left;
}

<div id="block">
  <div class="media-body">
    <p id="time">10:00 A.M.</p>
    <h4 class="media-heading"><b>Meet & Greet</b></h4>
    <p>Nametags, Swag, Refreshments</p>
  </div>
</div>

但是 Bootstrap 将属性 width: 10000px; 设置为 .media-body 类。因此，需要将此属性重新定义为width: auto;：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

#block {
  text-align: center;
}
.media-body {
  display: inline-block;
  text-align: left;
  width: auto;
}

<div id="j2" class="jumbotron">
  <div class="container">
    <div class="row">
      <div id="block" class="col-sm-8 col-sm-offset-2">
        <div class="media-body">
          <p id="time">10:00 A.M.</p>
          <h4 class="media-heading"><b>Meet & Greet</b></h4>
          <p>Nametags, Swag, Refreshments</p>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：