Vertical align span text inside inline-block div

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>

Hashem Qolami

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.

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)

来源：https://stackoverflow.com/questions/25457954/vertical-align-span-text-inside-inline-block-div

标签

html

alignment

vertical-alignment

css