CSS文本响应网站

enter image description here

在一个div头当我做了broswer小，它看起来是这样的：

enter image description here

但我想要它看起来像这样：

enter image description here

我该怎么做？

HTML：

<div class="wrapper"> 
     <h4>ALongText LikeThisOne</h4> 
</div>

CSS：

.wrapper{ 
    border:1px red solid; 
    height:60px; 
} 

.wrapper h4{ 
    margin-top: 0; 
    padding-top: 20px; 
    text-align: center; 
}

的jsfiddle：http://jsfiddle.net/4cBxt/

来源

2014-05-02 WIRN

您也可以尝试transform属性：

.wrapper h4 { 
    margin-top: 0; 
    position: relative; 
    text-align: center; 
    top: 50%; 
    transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
}

Working fiddle

来源

2014-05-02 09:12:32

工作很好，非常感谢！ – WIRN

@WIRN仅供参考，这在IE8中不起作用。 –

好的，感谢您的信息，但我不需要关心ie8在这个项目中，感谢上帝！ – WIRN

使用垂直对齐，文本对准显示CSS属性沿着呈现DIV中的文本垂直并水平居中。

.wrapper{ 
border:1px red solid; 
height:60px; 
display: table; 
} 

.wrapper h4{ 
    margin-top: 0; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

JS小提琴：http://jsfiddle.net/4cBxt/2/

来源

2014-05-02 08:57:15 suneetha

谢谢，但现在你改变了包装的宽度。它必须是100％宽 – WIRN

CSS文本响应网站

回答

相关问题