Как мне центрировать по вертикали <aside>элементов? - PullRequest
1 голос
/ 06 августа 2020

Я пытаюсь центрировать три элемента <aside> по вертикали. Как видите, они выровнены ближе к правой стороне.

     <aside>
      <section>
        <div class="container">
          <nav>
            <ul class="center">
              <a><li>Home</li></a>
              <a><li>Projects</li></a>
              <a><li>Contact</li></a>
            </ul>
          </nav>
        </div>
      </section>
    </aside>

CSS

body{
  margin: auto;
}

.container{
  background-color: black;
  color: white;
  width: 7rem;
  height: 100vh;
  display: flex;
  flex-direction: column;
  text-align: center;
}

ul{
  list-style-type: none;
}

Ответы [ 3 ]

1 голос
/ 06 августа 2020

добавьте это в свой css:

ul{
  padding:0;}

body{
  margin: auto;
}

.container{
  background-color: black;
  color: white;
  width: 7rem;
  height: 100vh;
  display: flex;
  flex-direction: column;
  text-align: center;
}

ul{
  list-style-type: none;
  padding:0;
}
<aside>
      <section>
        <div class="container">
          <nav>
            <ul class="center">
              <a><li>Home</li></a>
              <a><li>Projects</li></a>
              <a><li>Contact</li></a>
            </ul>
          </nav>
        </div>
      </section>
    </aside>
1 голос
/ 06 августа 2020

У элемента ul есть отступ. Вам нужно сделать ul {padding: 0} или лучше: сделать padding 0 для всех элементов с помощью * {padding: 0}, это удалит отступы по умолчанию.

коробкамодель

0 голосов
/ 06 августа 2020

Я пробовал это в JSFiddle, и текст казался более выровненным по центру, когда я сделал

.container{text-align: left;}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...