如何水平对齐li's在ul元素中

我的问题是，无论我尝试什么，我都无法弄清楚为什么<li>不想居中。注意：所谓中心，我的意思是使三个<li>在我的<div>元素中水平居中
我的代码：

<div class="bottomBar" id="bottomBar">
<ul class="bottomUl">
<li>
<span onclick="contactMe ();"> Contact Me </span>
</li>
<li>
<span> Help </span>
</li>
<li>
<span> Social Media </span>
</li>
</ul>
</div>

和CSS：

.bottomBar {margin-left: 18.0%; height: 80px; background-color: #555555; padding: 10px; box-shadow: 0px 1px 10px black; bottom: 0;}
.bottomUl {color: white; width: 10%; list-style-type: none; margin: 0px; display: block;}
.bottomUl li span {font-family: 'Montserrat-Regular';}
.buttonUl li {height: 100px; width: 100px; border: 1px solid red; display: inline-block;}
.bottomUl span:hover {cursor: pointer; color: red; text-shadow: 1.5px 1.5px black;}

我认为ul的css应该更改一点。删除width:10%，并将text-align:center和padding:0添加到ul。

.bottomUl {
color: white;
list-style-type: none;
margin: 0;
display: block;
padding: 0;
text-align: center;}

上述解决方案将使li在垂直的中间居中

编辑：1

如果希望所有li都在同一行。您需要在CSS中探索flex。对于ul，您的css应该如下所示

.bottomUl {
color: white;
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;}

上述CSS将以li的中心为中心。justify-content属性将帮助您根据需要在flex中放置元素。

下面的CSS将在flex中的li周围留出空间。

.bottomUl {
color: white;
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;}

下面的CSS将在li的之间放置空格。如果您使用space-between弹性项目。

.bottomUl {
color: white;
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;}

下面的CSS将使li的间距相等。如果将space-evenly属性用于justify-content

.bottomUl {
color: white;
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-evenly;}

我建议在下面的链接中更多地探索flex盒子https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

用于跨浏览器兼容性。请访问以下链接，它是否满足您的需求https://caniuse.com/#feat=flexbox

希望这个答案能帮助你：)

试试这个css。

.bottomBar {margin-left: 18.0%; height: 80px; background-color: #555555; padding: 10px; box-shadow: 0px 1px 10px black; bottom: 0;}
.bottomUl {color: white; width: 100%; list-style-type: none; margin: 0px; display: block; text-align: center;}
.bottomUl li span {font-family: 'Montserrat-Regular';}
.bottomUl li {height: 100px; width: 100px; border: 1px solid red; display: inline-block;}
.bottomUl span:hover {cursor: pointer; color: red; text-shadow: 1.5px 1.5px black;}

我做了什么：

将'.buttonUl-li'更改为'.bottomUl-li'
更改了"宽度：10%；"到"宽度：100%；"under.bottomUl
添加了"文本对齐：居中；"under.bottomUl

要使元素居中，需要使用margin: autocss属性。只需检查下面的示例代码。div将位于其父级的中心，宽度为80%。ul元素也会发生同样的情况。

div{
width: 80%;
margin: auto;
}
li{
list-style-type: none; 
display: inline-block;
}
ul{
width: 80%;
margin: auto;
}

如果你想让它真正居中，请确保记住DOM元素的默认CSS属性：

https://www.w3schools.com/cssref/css_default_values.asp

在HTML元素的默认CSS值中，重点关注边距和填充。要完全控制布局，只需使用以下内容：

*{
margin: 0;
padding: 0;
}

all*选择器将确保将所有元素的填充和边距设置为0。

我想知道为什么margin: auto;不适用于li elemets。我为你找到了解决方案：

<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 80%;
margin: auto;
background-color: yellow;
}
li {
list-style-type: none;
display: inline-block;
background-color: blue;
width: 32%;
}
ul {
width: 80%;
margin: auto;
background-color: purple;
}
</style>
</head>
<body>
<div class="bottomBar" id="bottomBar">
<ul class="bottomUl">
<li>
<span onclick="contactMe ();"> Contact Me </span>
</li>
<li>
<span> Help </span>
</li>
<li>
<span> Social Media </span>
</li>
</ul>
</div>
</body>
</html>

相关内容

最新更新

热门标签：