CODEWITHSUNDEEP
htmlcss
Thread7
Thread7

Reputation: 1090

Setting text to vertical middle inside a div

I've read some Q&A about centering some text inside a div but for some reason the examples I try are not working for me. I'm using some jquery-ui and jquery-mobile css libraries but I don't think that is my problem. The "blue button" seems to align vertically in the middle just fine. But why don't the two text columns?

Here is the jsfiddle link: http://jsfiddle.net/Thread7/tstwwt9p/

<br/><br/>
<div class="ui-grid-b" style="display: table;width: 100%;border-style: solid;">
  <div class="ui-block-a" style="text-align:center;">
    <button style="color:#000;background-color:#00b2ee" class="ui-btn ui-shadow ui-corner-all" type="button">Blue Button</button>
  </div>
  <div class="ui-block-b " style="text-align:center;display: table-cell;">Middle Column Text</div>
  <div class="ui-block-c" style="text-align:center;"><a href="#" class="ui-link">Sample Link Text</a></div>
</div>

Upvotes: 0

Views: 284

Answers (2)

Paulo Arromba
Paulo Arromba

Reputation: 108

You don't need to use display: table and table-cells to achieve vertical centering, although it is one way.

I find it simpler to set the height and line-height to the same value when dealing with small single line text, like this:

<div class="ui-grid-b" style="width: 100%;border-style: solid;">
  <div class="ui-block-a" style="text-align:center;height:60px;line-height:60px;">
    <button style="color:#000;background-color:#00b2ee" class="ui-btn ui-shadow ui-corner-all" type="button">Blue Button</button>
  </div>
  <div class="ui-block-b " style="text-align:center;height:60px;line-height:60px;">Middle Column Text</div>
  <div class="ui-block-c" style="text-align:center;height:60px;line-height:60px;"><a href="#" class="ui-link">Sample Link Text</a></div>
</div>

Upvotes: 1

hewo
hewo

Reputation: 816

Try this:

<br/><br/>
<div class="ui-grid-b" style="display: table;width: 100%;border-style: solid;">
  <div class="" style="text-align:center;">
    <button style="color:#000;background-color:#00b2ee" class="ui-btn ui-shadow ui-corner-all" type="button">Blue Button</button>
  </div>
  <div class="" style="text-align:center;display: table-cell; vertical-align: middle;">Middle Column Text</div>
  <div class="" style="display: table-cell;text-align: center;vertical-align: middle;">
    <a href="#" class="ui-link">Sample Link Text</a>
  </div>
</div>

Upvotes: 0

Related Questions