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文本響應網站

回答

相關問題