Как выровнять этот div в центре, чтобы он был отзывчив на всех устройствах - PullRequest
Новая
       42

Как выровнять этот div в центре, чтобы он был отзывчив на всех устройствах

0 голосов
/ 20 мая 2019

Я делаю сайт-портфолио и хочу, чтобы этот маленький логотип был в середине страницы, но он не отзывчив. 

* {
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
}

.box1 {
  position: absolute;
  margin: 0 auto;
  i think i'm messing up here
 width: 90px;
  height: 100px;
  background: rgb(31, 31, 31);
  float: left;
  text-align: center;
}

.box1 a {
  position: relative;
  font-family: 'Roboto Slab', sans-serif;
  font-weight: 700;
  font-size: 22px;
  text-decoration: none;
  color: #fff;
  top: 50%;
}

.box1 a:hover {
  color: rgb(241, 241, 241);
}
<div class="container">
  <nav>
    <div class="box1"><a href="#">Top</a></div>
  </nav>
</div>

Ожидания

Я ожидаю, что текст будет выровнен снизу с рамкой и будет иметь некоторое пространство внизу и весь разделитель в центре страницы, это также будет функционировать как домашняя кнопка. также предложения / отзывы будут оценены

1 Ответ

0 голосов
/ 20 мая 2019

Просто добавьте 

 top:50%;
   left:50%;
   transform: translate(-50%, -50%);

к вашему position:absolute, чтобы центрировать что-либо.Помните, что абсолют работает только для позиции, определенной родителем. 

* {
    margin: 0;
    padding: 0;

  }
html, body { 
    margin: 0;
    padding: 0;
}

    .box1 { 
       position: absolute;
       margin: 0 auto;
       top:50%;
       left:50%;
       transform: translate(-50%, -50%);
       
       width: 90px;
       height: 100px;
       background: rgb(31, 31, 31);
       float: left; 
       text-align: center;
  }

  .box1 a { 
      position: relative;
      font-family: 'Roboto Slab',sans-serif;
      font-weight: 700;
      font-size: 22px;
      text-decoration: none;
      color: #fff;
      top: 50%;            
  }

  .box1 a:hover { 
      color: rgb(241, 241, 241);   
  }
<div class="container">
     <nav> 
         <div class="box1"><a href="#">Top</a></div>
     </nav>
</div>
...