Как мне переместить список маркеров в центр, выровняв их по вертикали в CSS?

ProgramBox

Как мне переместить список маркеров в центр, выровняв их по вертикали в CSS?

Post author:admin
Запись опубликована:17 июля, 2022
Post category:Вопросы по программированию

#html #css #html-lists

#HTML #css #html-списки

Вопрос:

Я не уверен, что я сделал не так, но маркеры в неупорядоченных списках смещаются в крайний левый угол страницы, в то время как содержимое остается в центре. Каков наилучший способ переместить маркированные точки обратно в центр, выровняв их по вертикали, чтобы они не выглядели неорганизованными?

Вот ссылка на мой проект 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>

Развернуть фрагмент

Ответ №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>

Развернуть фрагмент

1. Мы можем добиться этого без изменения ширины. Изменение ширины также может привести к переносу текста для большого текста.

2. @Ishtiaq с помощью width: max-content; проблема будет исправлена!

3. width: max-content; все в порядке. Но я говорю о width: 20%; том, для чего добавляется ul .

4. @Ishtiaq это зависит от проекта и цели, в этой ситуации width: 20%; работает нормально, но для динамической ширины использование width: max-content; сработало!

Ответ №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>

Ответ №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

Ответ №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>

Развернуть фрагмент

Ответ №5:

Вы можете добавить следующие CSS для ul и li , и это решит вашу проблему.

 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>

Развернуть фрагмент