Is it possible to vertically align text within a div?

This question already has an answer here:

How do I vertically align text in a div? 25 answers

---

为您的文本内容创建一个容器，也许是一个span 。

#column-content {
  display: inline-block;
}
img {
  vertical-align: middle;
}
span {
  display: inline-block;
  vertical-align: middle;
}

/* for visual purposes */
#column-content {
  border: 1px solid red;
  position: relative;
}

<div id="column-content">

  <img src="http://i.imgur.com/WxW4B.png">
  <span><strong>1234</strong>
    yet another text content that should be centered vertically</span>
</div>

---

Andres Ilich has it right. Just in case someone misses his comment...

A.) If you only have one line of text:

HTML:

<div>vertically centered text</div>

CSS:

div
{
  height: 200px;
  line-height: 200px; /* <-- this is what you must define */
  vertical-align: middle;
}

Click for Demo

B.) If you have multiple lines of text:

HTML:

<div><span>vertically centered text</span></div>

CSS:

div
{
  height: 200px;
  line-height: 200px;
}

span
{
  display: inline-block;
  vertical-align: middle;
  line-height: 14px; /* <-- adjust this */
}

Click for Demo

---

Update April 10, 2016

Flexboxes should now be used to vertically (or even horizontally) align items.

<div class="flex-container">
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
</div>

<style>
.flex-container {
    display:flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
}
</style>

A good guide to flexbox can be read on CSS Tricks. Thanks Ben (from comments) for pointing out, didn't have time to update.

---

A good guy named Mahendra posted a very working solution here

The following class should make the element horizontally and vertically centered to its parent.

.absolute-center {

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

}

链接地址: http://www.djcxy.com/p/7154.html

上一篇: 如何在引导中垂直对齐容器

下一篇: 是否有可能在一个div内垂直对齐文本？