在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>回答 3
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用户
发布于 2016-01-14 04:46:21
我觉得这对你来说应该行得通。我不得不改变一些事情。
.aboutMe ul{
width: 70%;
background-color: red;
}
.aboutMe ul li{
background-color: red;
margin-left: 33%;
}
.aboutMe ul li ul{
margin-left: -7em;
font-size: 0.7em;
}Stack Overflow用户
发布于 2016-01-14 04:14:59
这是一种有点复杂的方法，但它认为这是未加注意的结果。
* {
margin: 0;
padding: 0;
}
ul {
padding: 0;
}
.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 {
background-color: red;
}
.aboutMe li#skills ul {
font-size: 0.7em;
display: inline-block;
margin-left: 50%;
transform: translateX(-50%);
}<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提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34775916
复制相关文章
相似问题
腾讯云开发者
