Zentrieren eines mehrzeiligen Blocks, während der Text nach links ausgerichtet bleibt

Question

Ich habe verschiedene Methoden ausprobiert, darunter text-align: center; auf <div> und display: inline-block; auf <p> und <h4>. Da ich drei verschiedene Text-Tags innerhalb des divs habe, die ich ausrichten möchte, wird der Text nur zentriert und nicht nach links ausgerichtet.

@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

Dies ist die übliche Lösung:

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

Aber Bootstrap setzt die Eigenschaft width: 10000px; auf die .media-body Klasse. Daher müssen Sie diese Eigenschaft als width: auto; neu zu definieren:

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