如何將中心文字與CSS對齊？

我有一個包含文本的div標籤，並且我想將此div的內容垂直居中對齊。如何將中心文字與CSS對齊？

這裏是我的div風格：

div { 
    height: 200px; 
    line-height: 200px; 
    text-align: center; 
    border: 2px dashed #f69c55; 
    } 
    span { 
    display: inline-block; 
    vertical-align: middle; 
    line-height: normal; 
    }

這裏是我的html

<div> 
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis.</span> 
</div>

我想文字就像下圖： -

i.stack.imgur.com/a5wQe .png

來源

2017-04-22 James

@ImranAli你確定用戶使用'1'代表可以發表圖片？ –

-1

給display:table至div和display:table-cell到span 將做的伎倆。

div { 
 
     
 

 
    text-align: center; 
 
    border: 2px dashed #f69c55; 
 
    display:table; 
 
    height:300px; 
 
    } 
 
    span { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    
 
    }

<div> 
 
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis.</span> 
 
</div>

來源

2017-04-22 05:20:57

如何將中心文字與CSS對齊？

回答

相關問題