在保持文本左对齐的同时使多行块居中

Question

我尝试了各种不同的方法但无效，包括text-align: center;和<div>以及display: inline-block; <p>使用<h4>。由于我在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>

Answer 1

这是通常的解决方案：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;