时间戳

首页 > 解决方案 > 我需要按中心制作“ul”（使用 Bootstrap）

html - 我需要按中心制作“ul”（使用 Bootstrap）

问题描述

我想让列表以给定的宽度居中。

body {
  background-color: rgb(26, 40, 114);
}

h1 {
  color: white;
  text-shadow: 7px 7px 10px black;
}

li {
  list-style: none;
  border-radius: 5px;
  border: 2px solid white;
  background-color: black;
  padding: 7px;
  width: 200px;
}

#menu {
  text-align: center
}

#list {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  text-align: center;
}
<body>
  <h1 class="text-center">MENU</h1>
  <div id="menu">
    <ul id="list">
      <li><a href="#">text_1</a></li>
      <li><a href="#">text_2</a></li>
      <li><a href="#">text_3</a></li>
      <li><a href="#">text_4</a></li>
      <li><a href="#">text_5</a></li>
    </ul>
  </div>
</body>

标签： htmlcsswebbootstrap-4

解决方案

简单地给display: flex;和justify-content:center;给id#menu 

body {
            background-color: rgb(26, 40, 114);
        }

        h1 {
            color: white;
            text-shadow: 7px 7px 10px black;
            text-align:center;
        }

        li {
            list-style: none;
            border-radius: 5px;
            border: 2px solid white;
            background-color: black;
            padding: 7px;
            width: 200px;
        }

        #menu {
            display:flex;
            justify-content: center;
        }

        #list {
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            text-align: center;
        }
    <body>
    <h1 class="text-center">MENU</h1>
    <div id="menu">
        <ul id="list">
            <li><a href="#">text_1</a></li>
            <li><a href="#">text_2</a></li>
            <li><a href="#">text_3</a></li>
            <li><a href="#">text_4</a></li>
            <li><a href="#">text_5</a></li>
        </ul>
    </div>
    </body>

推荐阅读