html - placing a <p> beside a centered <h1> -
below code center inside. want center title , append date not moving title left. title have remain in middle date appended behind. how can achieve that?
<div class="row center"> <div class="col-md-12"> <h1 style="display:inline;">title</h1><p style="display:inline;"> 27th june 2014</p> </div> </div>
here trick, can try:
<div class="row text-center"> <div class="col-md-12"> <h1 class="title">title</h1> <p>27th june 2014</p> </div> </div>
css:
.text-center .title { display: inline-block; } .text-center .title + p { position: absolute; display: inline-block; top: 50%; margin: -5px 0 0 10px; /* adjust margin-top based on line height */ }
demo: http://plnkr.co/edit/tforjup4g8pr0lxlwn9w?p=preview
since col-md-12
has position: relative
can position p
absolutely, , fix vertical alignment negative margin (adjust line height).
also instead of .center
class can use build in bootstrap .text-center
class.
Comments
Post a Comment