0

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>
Wowsk
  • 3,637
  • 2
  • 18
  • 29
Thread7
  • 1,081
  • 2
  • 14
  • 28
  • BTW, my style='display: table' was something I was trying. But if I don't need it, that is fine too. – Thread7 Apr 26 '16 at 15:12
  • The blue button isn't vertically centered either. The container is getting its height from the button, so it only appears centered because the button and container are the same height. – Surreal Dreams Apr 26 '16 at 15:14
  • Think you haven't understood the principle behind centering via tables. You center a `table-cell` inside a `table`. So your "buttons" needed a `div` in a `div`: https://jsfiddle.net/4e7cafme/1/ – currently your markup and the inline styles aren't correct. – fheck Apr 26 '16 at 15:14
  • 3
    Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) – Shaggy Apr 26 '16 at 15:16
  • It is better to use CSS for styling, either in the head section, or a separate file. Use **div{text-align:center;}** in your CSS. – Arif Burhan Apr 26 '16 at 15:18
  • In response to fheck, I do have a div inside a div. Your jsfiddle link has nothing to do with tables. – Thread7 Apr 26 '16 at 15:36

2 Answers2

1

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>
Paulo Arromba
  • 108
  • 1
  • 12
0

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>
hewo
  • 786
  • 1
  • 8
  • 17