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

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -