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

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

试试这个 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”
将 .bottomUl
在 .bottomUl

Answer 2

我觉得你的 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 将把 space 放在 flex 中的 li 周围。

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

下面的 CSS 将把 space 放在 li 之间。如果你使用 space-between 弹性项目。

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

下面的CSS将spaceli的均匀。如果你用space-evenly属性到justify-content

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

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

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

希望这个回答对您有所帮助:)

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 元素的默认 CSS 值中，关注边距和填充。要完全控制布局，只需使用以下内容：

*{
margin: 0;
padding: 0;
}

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

我想知道为什么 margin: auto; 对 li 元素不起作用。我为您找到了解决方案：

<!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？

How do I horizontally align my li's in an ul element?

html

css

html-lists

centering