在div中居中显示列表项
在div中居中显示列表项
提问于 2016-01-14 03:58:42
我希望所有的项目都整齐地对齐，而不是全部居中。例如，在第一张图片中，它们都整齐地对齐，但不在div的中心。当你将它们居中时，它们看起来就像第二张图像。我希望它们看起来像第一张图片，但居中于div
uncentered image
centered image
.aboutMe{
font-size: 1.3em;
background-color: white;
border-radius: 10px;
width: auto;
height: auto;
margin: 30px 10px;
padding: 0px;
list-style-position: inside;
}
.aboutMe ul{
width: 70%;
margin: 0 auto;
padding: 0px;
background-color: #00CED1;
text-align: center;
}
.aboutMe ul li{
margin: 0 auto;
background-color: red;
}
.aboutMe ul li ul{
margin: 0 auto;
font-size: 0.7em;
}
<div class="aboutMe">
<ul>
<li id="name">Name: Matt Muniz-Silva</li>
<li id="age">Age: 23</li>
<li id="skills">Programming Skills:
<ul>
<li>XHTML</li>
<li>javascript</li>
<li>CSS</li>
<li>jquery</li>
<li>Bootstrap</li>
<li>PHP</li>
<li>Mysql</li>
<li>Swift</li>
</ul>
</li>
</ul>
</div>Stack Overflow用户
发布于 2016-01-14 04:11:31
我按照你的风格给你的父母UL一个id为"center“和text-align:center ..它起作用了。
<div class="aboutMe">
<ul id="center">
<li id="name">Name: Matt Muniz-Silva</li>
<li id="age">Age: 23</li>
<li id="skills">Programming Skills:
<ul>
<li>XHTML</li>
<li>javascript</li>
<li>CSS</li>
<li>jquery</li>
<li>Bootstrap</li>
<li>PHP</li>
<li>Mysql</li>
<li>Swift</li>
</ul>
</li>
</ul>
</div>CSS
#skills ul li {text-align: center;}.aboutMe{
font-size: 1.3em;
background-color: white;
border-radius: 10px;
width: auto;
height: auto;
margin: 30px 10px;
padding: 0px;
list-style-position: inside;
}
.aboutMe ul{
width: 70%;
margin: 0 auto;
padding: 0px;
background-color: #00CED1;
}
.aboutMe ul li{
margin: 0 auto;
background-color: red;
}
#center {
text-align:center;
}
.aboutMe ul li ul{
margin: 0 auto;
font-size: 0.7em;
}希望这能有所帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34775916
复制相关文章
相似问题
腾讯云开发者
