CSS 设置导航栏文字的垂直居中和水平居中
2016-10-30 19:19
1281 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> li{ display:inline; height:50px; line-height:50px; } ul{ background-color:red; height:50px; text-align:center; } </style> </head> <body> <p>链接列表水平显示:</p> <ul> <li><a href="/html/" target="_blank">HTML</a></li> <li><a href="/css/" target="_blank">CSS</a></li> <li><a href="/js/" target="_blank">JavaScript</a></li> <li><a href="/xml/" target="_blank">XML</a></li> </ul> </body> </html>
垂直居中:
1、li的height和line-height设置的值和ul的height设置的值相同即可。
2、li{display:inline-block;padding:14px 16px},这时ul不需要设置高度
水平居中:ul里面设置text-align:center即可。
相关文章推荐
- CSS设置行内元素和块级元素的水平居中、垂直居中
- 纯css实现文字及图片水平垂直居中
- 让div中的文字水平居中和垂直居中的css
- Android进阶(二十二)设置TextView文字水平垂直居中
- CSS实现文字和图片的水平垂直居中
- CSS垂直水平居中,display:flex,布局,文字属性的一些零碎
- CSS设置元素水平居中、垂直居中方式汇总
- CSS设置行内元素和块级元素的水平居中、垂直居中
- toot2008@126.com(W3C标准) ASP.NET + CSS 设置 图片等比放缩、水平居中、垂直(竖直)居中
- 纯css实现div中单行文字,多行文字,嵌套div垂直水平居中问题
- CSS设置水平居中和垂直居中
- 纯css多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中
- line-height,text-align设置文字水平垂直居中
- 利用css将文字和图片水平垂直居中显示
- CSS大小不固定的图片和多行文字的垂直水平居中
- css将文字和图片水平垂直居中
- CSS 实现:文字水平垂直居中
- 文字垂直居中,水平居中 a标签水平居中只要给他的父级设置text-align=center
- CSS实现文字或图片等元素垂直、水平、绝对定位居中技术
- css实现多行文字与图片垂直水平居中