DIV+CSS LI里面怎么让垂直的文字垂直居中?

<style type="text/css">
<!--
.shoucang {
width: 58px;
height: 300px;
float: right;
background-color: #CCC;
border: 1px solid #999;
}
.shoucang .sc_ul {
width: 21px;
margin-right: auto;
margin-left: auto;
list-style-type: none;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.shoucang .sc_ul li {
height: 80px;
width: 21px;
margin-bottom: 9px;
color: #FFF;
text-decoration: none;
text-align: center;
vertical-align: middle;
background-color: #FF0000;
font-size: 12px;
border: 1px solid #666;
}
-->
</style>
</head>
<body>
<div class="shoucang">
<ul class="sc_ul"><li>设为首页</li><li>收藏本站</li>
<li class="no">联系方式</li>
</ul>
</div>
问题补充:不但要垂直居中,而且还要左右居中,IE和火狐都要能通过。。

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建一个html文件,例如:index.html,填充问题基础代码。

2、在index.html中的<style>标签中,将“.shoucang .sc_ul li”中的“height: 73px;”调整为:height: 73px;padding-top: 7px;。

3、最后,浏览器运行index.html页面,此时发现li标签中的文字被垂直和水平居中了。

温馨提示:内容为网友见解,仅供参考
第1个回答  2019-07-12

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html,输入问题给定的代码。

2、其次,在index.html中的<style>标签中,将li标签样式中的“height: 73px;”修改为:height: 73px; padding-top: 7px;。

3、浏览器运行index.html页面,此时<li>标签中的内容被成功垂直居中了。

本回答被网友采纳
第2个回答  推荐于2017-10-04
水平居中是text-align:center
垂直居中 一般是用 line-height
比如你li的高度是80px 那你设置 line-height:80px 文字就垂直居中
第3个回答  2015-05-21
代码如下:
<style type="text/css">
<!--
.shoucang {
width: 58px;
height: 300px;
float: right;
background-color: #CCC;
border: 1px solid #999;
}
.shoucang .sc_ul {
width: 21px;
margin-right: auto;
margin-left: auto;
list-style-type: none;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
.shoucang .sc_ul li {
text-align:center;
vertical-align: middle;
height: 80px;
width: 21px;
margin-bottom: 9px;
color: #FFF;
text-decoration: none;
text-align: center;
vertical-align: middle;
background-color: #FF0000;
font-size: 12px;
border: 1px solid #666;
}
-->
</style>
</head>
<body>
<div class="shoucang">
<ul class="sc_ul"><li>设为首页</li><li>收藏本站</li>
<li class="no">联系方式</li>
</ul>
</div>
第4个回答  2013-06-12
没有居中的,我现学了一下text-align: text-decoration: text-indent: text-shadow: text-transform: 你怎么找垂直居中? 用表格吧。table,简单 不行你就自己找吧。
相似回答