Выровнять текст по центру и левому краю

151

11 июня 2019, 03:40

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

Answer 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>

Answer 2

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

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

* { 
  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>