1、利用text-align属性使文本水平居中。
text-align属性规定了文本在元素中的水平对齐,通过使用center值来设置文本。
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title></title> <styletype="text/css"> .txt1{ font-size:30px; text-align:center; } span{ text-align:center; } .txt2{ text-align:right; } </style> </head> <body> <p>这是内容1</p> <p><span>这是内容2</span></p> <p><span>这是内容3</span></p> <!--上面用span居中时,无法居中,因此span是行级元素, 行级元素无法设置text-align,若把text-align设置给外面的p即可, 所以自己理解的,若想把行级元素居中,在外面给它套个块级元素。 --> </body> </html>
2、line-height属性使文字垂直居中
把 line-height 的高度设置和 height 高度一样就能使文字垂直居中。
html,body{ width:100%; height:100%; margin:0; padding:0; } .content{ width:300px; height:300px; background:orange; margin:0auto;/*水平居中*/ position:relative; top:50%;/*偏移*/ margin-top:-150px; }
本文教程操作环境:windows7系统、css3版,DELL G3电脑。
以上就是关于“CSS中让文字居中可以怎样做,代码如何写”的介绍了,感谢各位的阅读,希望这篇文章能帮助大家解决问题。如果想要了解更多知识,欢迎关注恒创科技,小编每天都会为大家更新不同的知识。