Question

您好，我无法使用css将ul列表居中到标题和主图像。如果运行代码，则ul列表位于居中图像和标题的左侧。另外，如果我输入text-align：center;在ul列表中，它看起来是无组织的，并且项目符号没有对齐到左侧。这是代码

    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>McDonalds Tribute Page</title>

    <link rel="stylesheet" type="text/css" href="tribute.css">
  </head>
  <body>
    <div id="main">
      <header id="title">
        <h1>
        McDonalds Tribute Page
        </h1>
        </header>
        <div id="main-image">
         <!-- <img src="https://i.imgur.com/2YsKZFI.png" alt="McDonalds   Golden Arches" /> -->
        </div>



      <div id="tribute-info">
        <body>
          <h3 class="color-text">A timeline of all things McDonalds</h3>
          <ul id=list-info>
            <li>
              <strong>1953</strong> - McDonalds opens first franchise in Phoenix
            </li>
            <li>
              <strong>1954</strong> - Ray Kroc approaches McDonald Brothers about opening first franchise outside of CA and AZ
            </li>
            <li>
              <strong>1958</strong> - McDonalds has sold 100 million burgers
            </li>
            <li>
              <strong>1958</strong> - McDonalds spreads to the East Coast
            </li>
            <li>
              <strong>1961</strong> - McDonald Brothers sold business rights to Ray Kroc for $2.7 million
            </li>
            <li>
              <strong>1963</strong> - 1 Billion burgers sold
            </li>
            <li>
              <strong>1968</strong> - The Big Mac was introduced to McDonalds
            </li>
            <li>
              <strong>1980</strong> - Chicken McNuggets are introduced
            </li>
            <li>
              <strong>2015</strong> - All day breakfast introduced
            </li>
          </ul>
        </body>
      </div>

      <!-- <div class="img-gallery">
        <section>
          <img src="https://i.imgur.com/2IkFLba.jpg" alt="big mac" />
          <img src="https://i.imgur.com/EZ58bYY.jpg" alt="chicken nugget" />
          <img src="https://i.imgur.com/EC9zcIT.png" alt="filet o fish" />
          <img src="https://i.imgur.com/17piAkN.jpg" alt="McFlurry" />
          <img src="https://i.imgur.com/hUog2df.jpg" alt="burger king" />
          <img src="https://i.imgur.com/WiDJfLM.jpg" alt="mcdonalds logo" />
        </section>
      </div> -->



      <body>

      </body>


    </div>
  </body>
</html>

和我的CSS

   #main {
  display: grid;
}

#title {
  text-align: center;
}

#main-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#tribute-info {
  margin-left: auto;
  margin-right: auto;
}

我无法发布图片，所以我将图片注释掉了

Answer 1

您的UL处于居中状态，但您只需要给包装div一定的宽度即可，否则它将占100％：

#main {
  display: grid;
}

#title {
  text-align: center;
}

#main-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#tribute-info {
  margin-left: auto;
  margin-right: auto;
  width: 300px;
}

ul {
  padding: 0;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>McDonalds Tribute Page</title>

  <link rel="stylesheet" type="text/css" href="tribute.css">
</head>

<body>
  <div id="main">
    <header id="title">
      <h1>
        McDonalds Tribute Page
      </h1>
    </header>
    <div id="main-image">
      <!-- <img src="https://i.imgur.com/2YsKZFI.png" alt="McDonalds   Golden Arches" /> -->
    </div>



    <div id="tribute-info">
      <h3 class="color-text">A timeline of all things McDonalds</h3>
      <ul id=list-info>
        <li>
          <strong>1953</strong> - McDonalds opens first franchise in Phoenix
        </li>
        <li>
          <strong>1954</strong> - Ray Kroc approaches McDonald Brothers about opening first franchise outside of CA and AZ
        </li>
        <li>
          <strong>1958</strong> - McDonalds has sold 100 million burgers
        </li>
        <li>
          <strong>1958</strong> - McDonalds spreads to the East Coast
        </li>
        <li>
          <strong>1961</strong> - McDonald Brothers sold business rights to Ray Kroc for $2.7 million
        </li>
        <li>
          <strong>1963</strong> - 1 Billion burgers sold
        </li>
        <li>
          <strong>1968</strong> - The Big Mac was introduced to McDonalds
        </li>
        <li>
          <strong>1980</strong> - Chicken McNuggets are introduced
        </li>
        <li>
          <strong>2015</strong> - All day breakfast introduced
        </li>
      </ul>
    </div>

    <!-- <div class="img-gallery">
        <section>
          <img src="https://i.imgur.com/2IkFLba.jpg" alt="big mac" />
          <img src="https://i.imgur.com/EZ58bYY.jpg" alt="chicken nugget" />
          <img src="https://i.imgur.com/EC9zcIT.png" alt="filet o fish" />
          <img src="https://i.imgur.com/17piAkN.jpg" alt="McFlurry" />
          <img src="https://i.imgur.com/hUog2df.jpg" alt="burger king" />
          <img src="https://i.imgur.com/WiDJfLM.jpg" alt="mcdonalds logo" />
        </section>
      </div> -->



    <body>

    </body>


  </div>
</body>

</html>

标题和图像未排列到ul列表中？

1 个答案: