ul如何在div里水平居中?html/css

 我来答
幻翼高达Zero
2019-07-05 · TA获得超过1.7万个赞
知道答主
回答量:499
采纳率:0%
帮助的人:7.9万
展开全部

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

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

2、在index.html中的<ul>标签中,输入样式代码:text-align: center;list-style: none;。

3、浏览器运行index.html页面,此时ul成功在div中居中了。

旧人滥心FH
2017-08-30 · 知道合伙人互联网行家
旧人滥心FH
知道合伙人互联网行家
采纳数:162 获赞数:467
安徽歌瑞森电子商务有限公司优秀测试工程师

向TA提问 私信TA
展开全部

代码:

效果:

代码含义:

text-align:center   属性规定元素中的文本的水平对齐方式。

代码源件:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style>

body,div,ul{padding:0px;margin: 0px;}

</style>

</head>

<body>

<div style="width:400px;height:100px; background: #eee; text-align: center; text-align: -webkit-center;">

<ul style="width: 50px; height: 100px; background: #ccc;">

</ul>

</div>

</body>

</html>

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
325x14x43C
2017-07-07 · TA获得超过188个赞
知道小有建树答主
回答量:148
采纳率:0%
帮助的人:61.4万
展开全部

定义了宽度以后使用margin:0 auto;这个样式可以居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
*{ padding:0; margin:0; list-style:none;}
.div{ width:500px; height:100px; border:1px solid #333;}
.div ul{ width:100px; height:50px; margin:0 auto; border:1px solid red;}
</style>
<body>
<div class="div">
 <ul>1</ul>
</div>

</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
亦舞200704
2017-07-13 · TA获得超过358个赞
知道小有建树答主
回答量:252
采纳率:60%
帮助的人:131万
展开全部
首先你的div要有宽,其次设置你的ul宽度然后加上margin: 0 auto;意思是上下间距是0,左右是自动,这样就会水平居中
例如:
<div class="box1">
<ul class="ul-si">
<li>标题</li>

<li>标题</li>
</ul>

</div>
css如下:
.box1{
width:800px;
margin:30px auto ;
}
.ul-si{
width: 300px;
margin: 0 auto;
}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
温陌觉M
推荐于2017-06-15 · TA获得超过369个赞
知道小有建树答主
回答量:251
采纳率:80%
帮助的人:138万
展开全部
<div style="width:200px; border:1px #f00 solid; padding:10px;">
<ul style="width:100px; margin:0 auto; border:1px #00f solid;">
<li>123</li><li>123</li>
</ul>
</div>

 起作用的就是width:100px; margin:0 auto;

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式