How do I move my bullet list to the center while having them vertically aligned in CSS?

user_17573575 0
Viewed 72

I'm not sure what I did wrong but the bullet points on the unordered lists are shifted to the far left of the page while the contents remain in the center. What's the best way to move the bullet points back to the center while having them vertically aligned so they don't look unorganized?

Here's a link to my codepen project:

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>

html-lists css html
5 Answers

I add below code and fixed!

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

You can change width as much as you want for example width: 20%; or use width: max-content; for dynamic width.

#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>

user_117497770

Another aproach is to try to use Flex - Bootstrap in order to achieve this. If you have not installed it yet, feel free to do it, because it is going to help you a lot. I would include the list inside div classes, as shown below:

 <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>
user_169822980

You could use a flex box with column direction to get what you want without specifying a width for your bullet list.

#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

user_102583530

wrap ul in div and use css as below:

#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>

user_91407400

You can add following CSS for ul and li and this will solve your issue.

ul li {
    text-align: left;
}

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

So your complete code will be;

 #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>

user_105249430
Related