CSS: Align text vertically and horizontally?

This question already has an answer here:

How to horizontally center a <div> in another <div>? 82 answers

---

The safest approach to this would be avoiding using CSS3 if you have to support old browsers. This method should work across all browsers.

CSS-Tricks wrote an article on it. https://css-tricks.com/centering-in-the-unknown/

.date-container{            <-- Your Red Box
  display: table;           <-- Set the Container to Display Table

  .date{
    display: table-cell;    <-- Set the Date to Display Table-Cell
    text-align: center;     <-- Align Text Center
    vertical-align: middle; <-- Set Vertical Alignment to Middle

    padding: 40px;          <-- Adjust Accordingly

  }
}

Check out the pen: http://codepen.io/luisreyes/pen/pjvrMj

---

If it is one line of text and/or image, then it is easy to do. Just use

text-align: center;
vertical-align: middle;
line-height: 90px;

See Demo:DEMO PAGE

---

text align vertically by this

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

for aligning horizontally just use

.parentelement{
 text-align:center;
}

refer this,also for breaking your sentence you can use "br tag"

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

上一篇: div中的CSS中心文本（水平和垂直）

下一篇: CSS：垂直和水平对齐文本？