0

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

1

2 ответа 2

1

Флексы помогут центрировать элементы как по вертикали, так и по горизонтали, а текстом внутри флекс контейнеров можете управлять как необходимо. Это грубый пример, но учитывает все необходимое для реализации:

.cnotainer {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 10px;
  padding: 10px;
  border: 1px solid #000;
  border-radius: 10px;
  max-width: 500px;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
}


.ico {
  color: red;
  font-weight: bold;
  margin-right: 10px;
}

.txt {
    text-align: left;
}
<div class="wrapper">
  <div class="cnotainer">
    <div class="item ">
      <div class="ico">ico</div>
      <div class="txt">Lorem ipsum dolor sit amet Lorem ipsum dolor
      </div>
    </div>
  </div>
</div>

7
  • Все конечно круто, но это должен быть один блок а не три разных 11 дек 2018 в 14:59
  • Так в вопросе и написано - "адаптивный блок" 11 дек 2018 в 15:03
  • А, дошло, в ответе и правда не очень адаптивный
    – andreymal
    11 дек 2018 в 15:04
  • а на рисунке его состояния с тремя разными ширинами 11 дек 2018 в 15:06
  • @chocolate_moles это развернутый пример, что вам мешает заменить width на max-width. Исправил ответ, вот вам адаптивный блок
    – Get-Web
    11 дек 2018 в 16:56
0

Вроде бы так - похоже

Вкладываем принудительные переносы строк и делаем скрываем их но показываем при нужных разрешениях , не знаю как это в сниппете сработает но приложу песочницу для проверки

* {
  margin: 0;
  padding: 0;
}

html,
body {
  padding: 30px;
}

.item {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 100px;
  border-radius: 4px;
}

span {
  display: inline-block;
  vertical-align: middle;
}

.a,
.b {
  display: none;
}

.marker {
  padding: 4px;
  font-size: 40px;
}

@media(max-width:650px) {
  .item {
    padding: 6px 50px;
  }
  .a {
    display: block;
  }
}

@media(max-width:476px) {
  .item {
    padding: 6px 10px;
  }
  .a,
  .b {
    display: block;
  }
}
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<div class="item">
  <span class="marker">&#9733;</span>
  <span>Система <br class="a">дифференциальных<br class="b"> уровнений</span>
</div>

2
  • С переносами работает, но нужно без переносов 13 дек 2018 в 11:26
  • @chocolate_moles тогда это не возможно 13 дек 2018 в 11:29

Ваш ответ

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

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