1

Хочу разместить ссылки по центру страницы, но если ссылки не помещаются в один ряд, то сделать перенос блока с ссылкой. Сейчас у меня так:

.buttons-in-row {
  justify-content: space-around;
  flex-direction: row;
  display: flex;
}

.but {
  width: 215px;
  position: relative;
  border: none;
  border-radius: 2px;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
  padding: 10px;
  text-align: center;
  font-size: 18px;
  box-shadow: 0 1px 2px #19191b;
  float: left;
  margin: 1em auto;
}

.but:hover,
.but:focus {
  background-color: #f3c433;
  box-shadow: 0 1px 2px #19191b inset;
}
<div style="buttons-in-row">
  <div>
    <a class="but" href="#">Скачать прайс</a>
  </div>
  <div>
    <a class="but" href="#">Заказать услугу</a>
  </div>
</div>

Ссылки почему-то всегда слева.

Как выровнять их по центру?

1 ответ 1

0

В первой строке html ошибка. Не

<div style="buttons-in-row">

а

<div class="buttons-in-row">

И надо ещё flex-wrap: wrap;

.buttons-in-row {
  justify-content: space-around;
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
}

.but {
  width: 215px;
  position: relative;
  border: none;
  border-radius: 2px;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
  padding: 10px;
  text-align: center;
  font-size: 18px;
  box-shadow: 0 1px 2px #19191b;
  float: left;
  margin: 1em auto;
}

.but:hover,
.but:focus {
  background-color: #f3c433;
  box-shadow: 0 1px 2px #19191b inset;
}
<div class="buttons-in-row">
  <div>
    <a class="but" href="#">Скачать прайс</a>
  </div>
  <div>
    <a class="but" href="#">Заказать услугу</a>
  </div>
</div>

3
  • Спасибо! Час сидел думал, в чем дело и проморгал style="" (:
    – messenja
    9 июл 2017 в 11:37
  • там не только style.Без wrap не работает 9 июл 2017 в 11:38
  • Если ответ полезен, его стоит отметить как принятый галочкой внизу. Это поможет ориентироваться пользователям, которые ищут ответ на подобный вопрос. 9 июл 2017 в 11:39

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.