关于css里<li>内文字 竖直居中 ?
#dh-t{margin-top:0px; clear:left; padding:0 auto; border-top:none; verflow:hidden; text-align:center; vertical-align:middle;}
#dh-t li{ float:left; font-weight:bold; list-style:none; margin:5px 5px; padding-bottom:4px; width:100px; height:50px; border:1px solid #333333; background:#f5dede;}
</style>
<!---css start--->
<div id="dh-t">
<ul style="padding:0; margin:0;">
<li><a href="/">案 例 1</a></li>
<li ><a href="/">案 例 2</a></li>
<li><a href="/">案 例 3</a></li>
<li><a href="/">案 例 4</a></li>
<li><a href="/">案 例 5</a></li>
<li><a href="/">案 例 6</a></li>
<li><a href="/">案 例 7</a></li>
<li><a href="/">案 例 8</a></li>
<li><a href="/">案 例 9</a></li>
</ul>
</div>
<!---css end--->
文字如何竖直居中?
we 展开
1.首先,打开HTML编辑器并创建一个新的HTML文件,比如index。说明:html,用于填写代码的基本层次的问题。-
2.在index.html中的<style>标签中,将“.shoucang .sc_ul li”中的“height: 73px;”调整为:height: 73px;padding-top: 7px;。
3.最后,浏览器运行index.html页面,发现li标记中的文本垂直和水平居中。
扩展资料:
其他代码:
Thecodeisasfollows:
< style type = "text/CSS" >
.Shoucang{
Width:58px;
Height:300px;
Float:correct;
Background-color:#CCC;
Border:1pxentity#999;
}
.Shoucang.Sc_ul{
Width:21px;
Margin-right:car;
Margin-left:car;
Thelist-style-type:no;
Padding-top:20px;
Padding-right:0px;
Padding-bottom:0px;
Padding-left:0px;
Margin-top:0px;
Margin-bottom:0px;
}
.Shoucang.Sc_ulli{
Thetext-align:center;
Vertical-align:intermediate;
Height:80px;
Width:21px;
Margin-bottom:9px;
Color:#FFF.
Textmodification:no;
Thetext-align:center;
Vertical-align:intermediate;
Background-color:#FF0000;
Fontsize:12px;
Border:1pxentity#666;
}
-->
> < / style
< / a >
The < body >
< div class = "shoucang" >
< ul class = "sc_ul" > < li > set as home < / li > < li > lee < / >
< li class = "no" > contact way lee < / a >
< / ul >
垂直居中的有两种办法。一是在设height值的时候使用line-height,二是没有height值时,使用padding-top和padding-bottom。
给这行代码加上一个line-height:50px 就是垂直居中了
#dh-t li{ float:left; font-weight:bold; list-style:none; margin:5px 5px; padding-bottom:4px; width:100px; height:50px; border:1px solid #333333; background:#f5dede;line-height:50px}
2011-07-15