Centering a multi-line block while keeping text aligned left - html

Question

I tried various different methods to no avail, including using text-align: center; on the <div> and display: inline-block; on the <p> and <h4>. Since the I have 3 different text tags inside the div I'm trying to align this only makes the text look centered and not aligned to the left.
#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

This is the usual solution:
#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>
But Bootstrap sets the property width: 10000px; to the .media-body class. Therefore, you need to redefine this property as 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>