How to vertically allign text inside div?

Question

I am trying to vertically allign text inside div but without success, text in blocks are not vertically aligned. Thank you very uch for your help.

My JQuery Try:

$('.content_txt').each(function(){
          if($(this).find('a').height() > 45){
              if($(this).find('b').length > 0){
                $(this).find('b').css('margin-bottom','10px');
                $(this).css('height','auto');
              }                
          }else{
                $(this).css('height','60px');
          }
});

HTML:

<div class="ui-body content_txt" style="background-color: rgb(246, 246, 253); height: 60px;">
   <div>
     <h2 class="h2" style="margin-bottom: 0px;padding:0px;vertical-align:middle;">
      <a class="ui-link" href="/cz/cs/65_chystane-akce/2147_2014-iw-best-plants-conference.html?do=article"> 2014 IW Be...Conference </a>
     </h2>
     <span class="small2">
     <b>7.5.2014 | Milwaukee, WI (US)</b>
     </span>
     <br>
   </div>
</div>

May this css `display:table-cell;vertical-align:middle` help ? — Stphane, Apr 10 '14 at 07:58
There is an ex [here](http://stackoverflow.com/questions/18649106/div-vertical-align-middle-css) or [there](http://www.vanseodesign.com/css/vertical-centering/) — Stphane, Apr 10 '14 at 08:01

score 0 · Answer 1 · answered Apr 10 '14 at 08:00

0

try this css:

vertical-align:middle;

answered Apr 10 '14 at 08:00

AlexPrinceton

1,173
9
12

score 0 · Answer 2 · answered Apr 10 '14 at 08:00

It depends on the situation. If you know your text is a one liner and the height of the container to center it in is static you can work with line-height to accomplish this.

Otherwise i would just use a table and place vertical-align on the td you're placing the text (or div) in.

That's the easiest and least hacky ways i know of.

score 0 · Answer 3 · answered Apr 10 '14 at 08:02

Use display:table-cell and vertical-align:middle together to accomplish this:

<div class="ui-body content_txt" style="background-color: rgb(246, 246, 253); height: 60px;">
   <div style="display:table-cell;vertical-align:middle;">
     <h2 class="h2" style="margin-bottom: 0px;padding:0px;vertical-align:middle;">
      <a class="ui-link" href="/cz/cs/65_chystane-akce/2147_2014-iw-best-plants-conference.html?do=article"> 2014 IW Be...Conference </a>
     </h2>
     <span class="small2">
     <b>7.5.2014 | Milwaukee, WI (US)</b>
     </span>
     <br>
   </div>
</div>

This will vertical align everything in the center of that div

score -1 · Answer 4 · edited Apr 10 '14 at 09:54

-1

Use this CSS for containing Div

display: table-cell;
vertical-align: middle;

edited Apr 10 '14 at 09:54

Panos Kalatzantonakis

12,525
8
64
85

answered Apr 10 '14 at 09:34

Prabagaran

1
1

How to vertically allign text inside div?

4 Answers4