Vertical align span text inside inline-block div

Question

I am building a website with a flat design. I have a header and under it two different coloured blocks next to each other. I tried float left and right but was advised to use display: inline-block instead.

I ran into an issue, though. I want to place some text right in the middle of both the left and right block and tried to use the align-items: center, but figured out that only works if the div is set to flex.

So my question is, can I somehow keep my inline-block and get my text centered in the middle of my blocks (both horizontal and vertically)?

    body {
      margin: 80px 0 0;
    }
    #pagewrapper {
      width: 100%;
    }
    #header {
      width: 100%;
      height: 80px;
      background-color: #008B8B;
      position: fixed;
      top: 0;
    }
    .content-left,
    .content-right {
      width: 50%;
      height: 500px;
      color: #FFFFFF;
      display: -moz-inline-stack;
      display: inline-block;
      zoom: 1;
      *display: inline;
    }
    .content-left {
      background-color: #66CC99;
    }
    .content-right {
      background-color: #20B2AA;
    }
    #header-bot {
      height: 800px;
      background-color: #F8F8FF;
    }
    #footer {
      height: 50px;
      background-color: #AFEEEE;
    }
    .title {
      font-size: 18px;
    }

<body>
  <div id="pagewrapper">
    <div id="header">
    </div>
    <!-- End of Header -->
    <div class="content-left">
      <span class="title">This is left Content</span>
    </div>
    <!-- End of Content Left -->
    <div class="content-right">
      <span class="title">This is Right Content</span>
    </div>
    <!-- End of Content Right -->
    <div id="header-bot">
    </div>
    <!-- End of Header-Bot -->
    <div id="footer">
    </div>
    <!-- End of Footer -->
  </div>
  <!-- End of PageWrapper -->

</body>

score 15 · Accepted Answer · edited May 23 '17 at 12:33

15

While changing display type of columns to table-cell may cause a trouble (e.g. the effect of relative positioning is undefined for table-cell elements) another option is adding a full-height (pseudo-)element into the columns and align that and the <span> element vertically by vertical-align: middle; declaration:

EXAMPLE HERE

.content-left,
.content-right { text-align: center; } /* Align inline children horizontally */

.content-left:after, .content-right:after {
    content: "";
    display: inline-block;
    vertical-align: middle;  /* Align inline level elements vertically */
    height: 100%;
} 

.title {
    vertical-align: middle;  /* Align inline level elements vertically */
}

For further details, you could refer to my answer here.

edited May 23 '17 at 12:33

Community

1
1

answered Aug 23 '14 at 07:13

Hashem Qolami

97,268
26
150
164

This worked perfectly! Thanks! You said that tables had drawbacks, and could cause issues. Does this method have any drawbacks like that? – Jesper Andersen Aug 23 '14 at 11:56
@JesperAndersen Just to get it to work in IE6/7 use a dummy HTML element instead of the `:after` pseudo element. Which is not really matter since `table-cell`s are not supported in IE6/7 too. – Hashem Qolami Aug 23 '14 at 11:58

score 3 · Answer 2 · answered Aug 23 '14 at 03:01

On your .content-left and .content-right divs change the display to table and add a text-align of center. For the .title spans, change the display to table-cell and add a vertical-align of middle;

.content-left, .content-right {
    display: table;
    text-align: center;
}
.title {
    display: table-cell;
    vertical-align: middle;
}

Here's a jsfiddle to demonstrate (I changed the divs to have a height of 200px so it's easier to see the centering effect in the smallish jsfiddle window)

Vertical align span text inside inline-block div

2 Answers2

Linked