DIV+CSS LI里面怎么让垂直的文字垂直居中?
<styletype="text/css"><!--.shoucang{width:58px;height:300px;float:right;background-co...
<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和火狐都要能通过。。 展开
<!--
.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和火狐都要能通过。。 展开
8个回答
展开全部
需要准备的材料分别有：电脑、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标签中的文字被垂直和水平居中了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，输入问题给定的代码。
2、其次，在index.html中的<style>标签中，将li标签样式中的“height: 73px;”修改为：height: 73px; padding-top: 7px;。
3、浏览器运行index.html页面，此时<li>标签中的内容被成功垂直居中了。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
水平居中是text-align:center
垂直居中 一般是用 line-height
比如你li的高度是80px 那你设置 line-height:80px 文字就垂直居中
垂直居中 一般是用 line-height
比如你li的高度是80px 那你设置 line-height:80px 文字就垂直居中
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
代码如下：
<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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
没有居中的，我现学了一下text-align: text-decoration: text-indent: text-shadow: text-transform: 你怎么找垂直居中？ 用表格吧。table，简单 不行你就自己找吧。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（6）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
