如何将我的项目符号列表移动到中心，同时让它们在 CSS 中垂直对齐？

Question

我不确定我做错了什么，但无序列表上的项目符号点移到了页面的最左侧，而内容仍然在中心。将项目符号点移回中心同时让它们垂直对齐以使其看起来不整齐的最佳方法是什么？

这是我的 codepen 项目的链接：

https://codepen.io/danielanggggg/pen/LYjwOer

HTML

#welcome-section {
  width: 100%;
  height: 100vh;
  top: 10vw;
  left: 2vw;
  display: block;
  margin-top: 10rem;
  text-align: center;
}

#navbar {
  position: fixed;
  top: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 20px;
  background-color: grey;
}

<section id="welcome-section">
  <h1>Daniel Ang</h1>
  <h3>Freelance Copywriter</h3>
  <p>Hi there! I'm Daniel. I specialize in direct-response copywriting. I believe you are looking<br> for a copywriter to increase your conversion rate and ultimately sell your products or services.</p>
  <p>I specialize in writing:</p>
  <ul>
<li>Emails</li>
<li>Landing Pages</li>
<li>Sales Letters</li>
<li>Product Descriptions</li>
<li>Facebook/Instagram Ads</li>
  </ul>
  <p>If you need any of the services above, please don't hesitate to reach out!</p>
</section>

Answer 1

我添加以下代码并修复！

ul{
   width: max-content;
   margin: 0 auto;
}

您可以根据需要更改宽度，例如 width: 20%; 或使用 width: max-content; 动态宽度。

#welcome-section {
  width: 100%;
  height: 100vh;
  top: 10vw;
  left: 2vw;
  display: block;
  margin-top: 10rem;
  text-align: center;
}

#navbar {
  position: fixed;
  top: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 20px;
  background-color: grey;
}

ul {
  width: max-content;
  margin: 0 auto;
}

<section id="welcome-section">
  <h1>Daniel Ang</h1>
  <h3>Freelance Copywriter</h3>
  <p>Hi there! I'm Daniel. I specialize in direct-response copywriting. I believe you are looking<br> for a copywriter to increase your conversion rate and ultimately sell your products or services.</p>
  <p>I specialize in writing:</p>
  <ul>
    <li>Emails</li>
    <li>Landing Pages</li>
    <li>Sales Letters</li>
    <li>Product Descriptions</li>
    <li>Facebook/Instagram Ads</li>
  </ul>
  <p>If you need any of the services above, please don't hesitate to reach out!</p>
</section>

Answer 2

另一种方法是尝试使用Flex - Bootstrap 来实现这一点。如果您还没有安装它，请随意安装它，因为它会对您有很大帮助。我会将列表包含在 div 类中，如下所示：

 <div class="d-flex flex-sm-row" >

   <div class="d-flex justify-content-center d-flex align-items-end flex-fill">
      <ul>
        <li>
        ...
        </li>
      </ul>
   </div>
  </div>

Answer 3

您可以使用具有列方向的弹性框来获得所需的内容，而无需为项目符号列表指定宽度。

#welcome-section {
  width: 100%;
  /* height is changed to min-height so the actual height will still be calculated based on content when 100vh is smaller than the height of your content */
  min-height: 100vh;
  top: 10vw;
  left: 2vw;
  margin-top: 10rem;
  
  display: flex;
  flex-direction: column;
  align-items: center;
}

https://codepen.io/fredns/pen/QWqNLOb

Answer 4

将ul 包裹在 div 中并使用 css 如下：

#welcome-section {
  width: 100%;
  height: 100vh;
  top: 10vw;
  left: 2vw;
  display: block;
  margin-top: 10rem;
  text-align: center;
}

#navbar {
  position: fixed;
  top: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 20px;
  background-color: grey;
}
.wrap{
display:flex
}
ul{
margin:auto;
}

<section id="welcome-section">
  <h1>Daniel Ang</h1>
  <h3>Freelance Copywriter</h3>
  <p>Hi there! I'm Daniel. I specialize in direct-response copywriting. I believe you are looking<br> for a copywriter to increase your conversion rate and ultimately sell your products or services.</p>
  <p>I specialize in writing:</p>
<div class="wrap">
  <ul>
<li>Emails</li>
<li>Landing Pages</li>
<li>Sales Letters</li>
<li>Product Descriptions</li>
<li>Facebook/Instagram Ads</li>
  </ul>
</div>
  <p>If you need any of the services above, please don't hesitate to reach out!</p>
</section>

Answer 5

您可以为ul 和li 添加关注CSS，这将解决您的问题。

ul li {
    text-align: left;
}

ul {
    width: fit-content;        
    margin: auto;
}

所以你的完整代码将是；

 #welcome-section {
            width: 100%;
            height: 100vh;
            top: 10vw;
            left: 2vw;
            display: block;
            margin-top: 10rem;
            text-align: center;
        }

        #navbar {
            position: fixed;
            top: 0px;
            width: 100%;
            display: flex;
            justify-content: center;
            font-size: 20px;
            background-color: grey;
        }

        ul li {
            text-align: left;
        }

        ul {
            width: fit-content;
            margin: auto;
        }
    

<section id="welcome-section">
        <h1>Daniel Ang</h1>
        <h3>Freelance Copywriter</h3>
        <p>Hi there! I'm Daniel. I specialize in direct-response copywriting. I believe you are looking<br> for a copywriter to increase your conversion rate and ultimately sell your products or services.</p>
        <p>I specialize in writing:</p>
        <ul>
            <li>Emails</li>
            <li>Landing Pages</li>
            <li>Sales Letters</li>
            <li>Product Descriptions</li>
            <li>Facebook/Instagram Ads</li>
        </ul>
        <p>If you need any of the services above, please don't hesitate to reach out!</p>
    </section>