如何在垂直中心创建文本

-1

我必须在一些背景颜色的中心（水平和垂直）显示一些文本内容。如何在垂直中心创建文本

我有这样的代码

"<h2 style="text-align:center; height:40px; background-color:#ABCDEF; color:#FFFCBA;"><span style="margin:auto;">USER LOGIN</span></h2>"

此水平而不是垂直方向使文本显示在中心。

任何帮助将是伟大的！

谢谢。

来源

2014-10-03 Devesh Agrawal

你的意思是屏幕的高度和宽度有“”周围小时HTML？ – starvator 2014-10-03 17:37:18

这将帮助你：http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div – 2014-10-03 17:37:25

在容器上使用填充而不是高度。 – 2014-10-03 17:38:35

使用填充，以高度关

<h2 style="text-align:center; background-color:#ABCDEF; color:#FFFCBA;padding:20px;"> 
    <span style="margin:auto;">USER LOGIN</span> 
</h2>

来源

2014-10-03 17:39:26 starvator

试试这个

<div style="width:100%; height:100%;"> 
    <h2 style="position:absolute;top: 50%; left: 50%;">Your text</h2> 
</div>

来源

2014-10-03 17:40:11

我不认为让div 100％100％是一个好主意...... – starvator 2014-10-03 17:51:31

CSS：

h2{ 
    text-align:center; 
    background-color:#ABCDEF; 
    color:#FFFCBA; 
    height:40px; 
} 

span{ 
    line-height:40px; 
}

MARKUP：

<h2 ><span>USER LOGIN</span></h2>

来源

2014-10-03 17:40:34

使用下面的代码：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
    width: 100vh; 
    height: 100vh; 
    background: #666; 
    color: #fff; 
    text-align: center; 
    display:table-cell; 
    vertical-align:middle; 
} 
</style> 
</head> 
<body> 

<div>center</div> 

</body> 
</html>

获取使用100vh

来源

2014-10-03 18:02:33

我喜欢你提供的有关获取高度和宽度的信息 – 2014-10-03 18:03:24

如何在垂直中心创建文本

回答

相关问题