居中多行塊同時保持文本對齊左

Question

我嘗試了各種不同的方法無濟於事，包括在<div>和display: inline-block;上<p>和上使用text-align: center;。由於我有三個不同的文本標籤裏面我試圖對齊這隻會使文本看起來居中，而不是對齊左側。

@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

這是通常的解決辦法：

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

但是引導設置屬性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>