Question

我的问题是我无法弄清楚，无论我尝试什么，为什么<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;}

Answer 1

我认为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。你的css应该跟ul

一样

.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-around;}

以下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

希望这个答案能帮到你:)。

Answer 2

试试这个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;}

我做了什么：

更改了＆＃39; .buttonUl li＆＃39;到＆＃39; .bottomUl li＆＃39;
更改宽度：10％;＆＃39;宽度：100％;＆＃39;在.bottomUl下
添加＆＃39; text-align：center;＆＃39;在.bottomUl下

Answer 3

要使元素居中，您需要使用margin: auto css属性。只需查看下面的示例代码即可。 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 Elements的默认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>

如何在ul元素中水平对齐我的li？

3 个答案: