Необходимо сверстать адаптивный блок в котором текст будет в центре и выровнен по левому краю. Такая вот простая задачка, решение которой я никак не могу найти
2 ответа
Флексы помогут центрировать элементы как по вертикали, так и по горизонтали, а текстом внутри флекс контейнеров можете управлять как необходимо. Это грубый пример, но учитывает все необходимое для реализации:
.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>
-
Все конечно круто, но это должен быть один блок а не три разных 11 дек 2018 в 14:59
-
-
-
-
@chocolate_moles это развернутый пример, что вам мешает заменить width на max-width. Исправил ответ, вот вам адаптивный блок– Get-Web11 дек 2018 в 16:56
Вроде бы так - похоже
Вкладываем принудительные переносы строк и делаем скрываем их но показываем при нужных разрешениях , не знаю как это в сниппете сработает но приложу песочницу для проверки
* {
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">★</span>
<span>Система <br class="a">дифференциальных<br class="b"> уровнений</span>
</div>