Проблема центрирования HTML / CSS с адаптивным дизайном - PullRequest
Новая
       16

Проблема центрирования HTML / CSS с адаптивным дизайном

0 голосов
/ 20 июня 2019

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

Я безуспешно пытался использовать бутстрапы col-sm и другие ресурсы. 

.container {
  /* display: static; */
  vertical-align: center;
  text-align: center;
  padding-top: 20%;
  padding-left: 10%;
}

body {
  height:100vh;
  background-position: center;
  background-repeat: repeat-y !important;
  background-size: cover;
  background-color: black;
}

.buttonB {
  transform: translate(-50%,-50%);
  width: 175px;
  height: 175px;
  text-align: center;
  line-height: 60px;
  color: #fff;
  font-size: 24px;
  text-transform: uppercase;
  text-decoration: none;
  font-family: sans-serif;
  box-sizing: border-box;
  background-size: 400%;
  margin: 15px;
  outline: 0 none;
}
<body background="assets/img/back2.jpg">
  <div class="container">
    <div class="row">
      <div class="col-12">
          <button mat-fab class="buttonB blue">About</button>
          <button mat-fab class="buttonB blue">Projects</button>
          <button mat-fab class="buttonB red">Contact</button>
          <button mat-fab class="buttonB red">Resume</button>
      </div>
    </div>
  </div>
</body>

Ответы [ 5 ]

1 голос
/ 27 июня 2019

Вы можете сделать это, удалив transform in button и padding-left в вашем классе контейнера.

это разветвленный стек

0 голосов
/ 20 июня 2019 

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-grow: 1;
  width: 70vw;
}

body {
  height:100vh;
  background-position: center;
  background-repeat: repeat-y !important;
  background-size: cover;
  background-color: black;
}

.buttonB {
  width: 200px;
  height: 175px;
  text-align: center;
  line-height: 60px;
  color: #fff;
  font-size: 24px;
  text-transform: uppercase;
  text-decoration: none;
  font-family: sans-serif;
  box-sizing: border-box;
  background-size: 400%;
  margin: 15px;
  outline: 0 none;
}
<body background="assets/img/back2.jpg">
 <div class="container">
      <button mat-fab class="buttonB blue">About</button>
      <button mat-fab class="buttonB blue">Projects</button>
      <button mat-fab class="buttonB red">Contact</button>
      <button mat-fab class="buttonB red">Resume</button>
 </div>
</body>
0 голосов
/ 20 июня 2019

Кнопка должна быть «margin: 0 auto», чтобы центрировать ее в контексте своего контейнера. Тем не менее, результирующее поведение очень сложно гарантировать без доступа к полной странице. Если это возможно, я отредактирую с лучшим ответом.

0 голосов
/ 20 июня 2019

Удалите padding-left на контейнере и transform на кнопках, которые работают против центрирования: они смещают кнопки и содержимое контейнера. 

.container {
  vertical-align: center;
  text-align: center;
  padding-top: 20%;
}

body {
  height:100vh;
  background-position: center;
  background-repeat: repeat-y !important;
  background-size: cover;
  background-color: black;
}

.buttonB {
  width: 175px;
  height: 175px;
  text-align: center;
  line-height: 60px;
  color: #fff;
  font-size: 24px;
  text-transform: uppercase;
  text-decoration: none;
  font-family: sans-serif;
  box-sizing: border-box;
  background-size: 400%;
  margin: 15px;
  outline: 0 none;
}
<body background="assets/img/back2.jpg">
  <div class="container">
    <div class="row">
      <div class="col-12">
          <button mat-fab class="buttonB blue">About</button>
          <button mat-fab class="buttonB blue">Projects</button>
          <button mat-fab class="buttonB red">Contact</button>
          <button mat-fab class="buttonB red">Resume</button>
      </div>
    </div>
  </div>
</body>
0 голосов
/ 20 июня 2019

Вы пытались добавить гибкий дисплей в свой контейнер? Это обычно будет держать все в контейнере так, как вы этого хотите. Все, что вам нужно сделать, это добавить «display: flex;» в вашем блоке .container.

...