Question

我想要“Hellow World！”这个文字。是对齐的，是垂直的中间。

不知道该怎么做。

https://jsfiddle.net/BRxKX/5945/

谢谢！

它应该适用于IE，CHrome和FF。

div {
    height: 200px;
    width: 450px;
    background: #000;
    font-size: 48px;
    font-style: oblique;
    color: #FFF;
    margin-top: 0;
    text-align: right;  
    vertical-align: middle;
}

<div>
    Hello World!
    </div>

Answer 1

Just set display: table-cell;

All browsers - http://caniuse.com/#search=table-cell

CSS

div {
    display: table-cell;
    height: 200px;
    width: 450px;
    background: #000;
    font-size: 48px;
    font-style: oblique;
    color: #FFF;
    margin-top: 0;
    text-align: right;  
    vertical-align: middle;
}

DEMO HERE

Answer 2

A simple way to achieve vertical-centering is by making the line-height the same as the div height:

div {
    height: 200px;
    line-height: 200px;
    width: 450px;
    background: #000;
    font-size: 48px;
    font-style: oblique;
    color: #FFF;
    margin-top: 0;
    text-align: right;  
    vertical-align: middle;
}

<div>
    Hello World!
    </div>

Answer 3

Try this:

div {
    height: 200px;
    line-height: 200px;
    width: 450px;
    background: #000;
    font-size: 48px;
    font-style: oblique;
    color: #FFF;
    margin-top: 0;
    text-align: right;  
}

Answer 4

You could make a before element with a width on 0 to give it something to align to. HTML:

<div>
<p>
Hello World!
</p>
</div>

CSS:

div {
    height: 200px;
    width: 450px;
    background: #000;
    font-size: 48px;
    font-style: oblique;
    color: #FFF;
    margin-top: 0;
    text-align: right;  

}
p {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}
p:before {
    content: '';
    height: 100%;
    width: 0;
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

Answer 5

如果您仅将块用于“Hello world”，那么我将执行以下操作：

div {
display:inline-table;
max-width:300px;
padding:50px 100px;
background-color:#000000;
color:#ffffff;

}

它使用填充和内联表的显示来绘制框。您可以根据需要更改填充值。

Answer 6

Flexbox option

div {
  height: 200px;
  width: 450px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  margin-top: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

<div>
  Hello World!
</div>

使对象与垂直中间

6 个答案: