Выровнять <div> по вертикали
Есть блок с длинным текстом и такими параметрами:
.preview {
text-align: left;
overflow-y: hidden;
width: 380px;
height: 90px;
margin: 0 10px;
font-size: 13px;
}<div class="preview">Длинный текст</div>И как только я его не пытался выровнять по вертикали, ничего не работает, не vertical-align, ни margin и тд. Как его можно выровнять по вертикали? Если указывать отступы сверху и снизу пикселями, то все работает, а автоматически - нет.
UPD: Возможно я плохо описал проблему, извиняюсь. Блок должен центрироваться по вертикали внутри основного блока с учетом всего содержимого внутри. Допустим если останется свободными 200px из 400, то он должен быть по центру этих 200 пикселей.
Можно для этого использовать flexbox в комбинции с margin, который для детей flex-контейнера максимально смещает элементы (в данном случае нужен margin-top: auto и margin-bottom: auto). Тогда удастся избежать вложенных flex-элементов и абсолютного позиционирования. Демонтрация:
.container {
display: flex;
flex-direction: column;
/* располагать элементы по левую сторону, а не растягивать их по умолчанию */
align-items: flex-start;
/* Задаём высоту чисто для демонстрации, это необязательно */
height: 400px;
}
.preview {
margin-top: auto;
margin-bottom: auto;
}
/* Стили для демонстрации */
* { outline: 1px dotted gray; }<div class="container">
<img src="https://www.google.ru/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
<div class="preview">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eum harum, nam nulla numquam obcaecati optio pariatur velit voluptates voluptatum! Amet excepturi ipsam ipsum laudantium minus natus obcaecati porro voluptas.
</div>
</div>Тогда такой вариант:
.container {
height: 400px;
display: flex;
flex-direction: column;
}
img {
flex-grow: 0;
align-self: start;
}
.v-center {
flex-grow: 1;
display: flex;
align-items: center;
}
.preview {
text-align: left;
overflow-y: hidden;
width: 380px;
height: 90px;
margin: 0 10px;
font-size: 13px;
}
/* Ненужное оформление */
.container {
background: #f5f5f5;
}
.v-center {
border: 1px dashed #ccc;
}
.preview {
background: #ddd;
}<div class="container">
<img src="https://www.google.ru/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
<div class="v-center">
<div class="preview">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eum harum, nam nulla numquam obcaecati optio pariatur velit voluptates voluptatum! Amet excepturi ipsam ipsum laudantium minus natus obcaecati porro voluptas.
</div>
</div>
</div>Как вариант блок, который нужно отцентрировать сделать дочерним. И применить line-height: высота, по которой нужно выровнять.
.child {
line-height: 1.25; /* по стандарту */
display: inline-block;
vertical-align: middle;
} .preview {
text-align: center;
overflow-y: hidden;
width: 380px;
font-size: 13px;
min-height: 90px;
border: solid 1px red;
background: #ddd;
display: inline-block;
vertical-align: middle;
line-height: 1.25;
}
.parent {
line-height: calc(100vh - 90px);
}<div class="parent">
<div class="preview">
<h1>Много текста</h1>
<p>Длинный текст</p>
</div>
</div>Можно приспособить вариант position:absolute; top:calc(50% - 90px);
.preview {
text-align: left;
overflow-y: hidden;
width: 380px;
height: 90px;
margin: 0 10px;
font-size: 13px;
border:1px solid red;
line-height:90px;
text-align:center;
}<div class="preview">Длинный текст</div> // 1. Если высота .preview не известна
.preview {
text-align: left;
overflow-y: hidden;
width: 380px;
margin: 0 10px;
font-size: 13px;
background-color:green;
}
.box{
height:400px;
background-color:red;
display:table-cell;
vertical-align:middle;
}
// 2. Если высота .preview известна
.previewFix {
text-align: left;
overflow-y: hidden;
width: 380px;
height: 90px;
margin: 0 10px;
font-size: 13px;
background-color:green;
position:absolute;
top:50%;
margin-top:-45px; // половина своей высоты
}
.boxFix{
height:400px;
width:400px;
background-color:yellow;
position:relative;
}
<div class="box">
<div class="preview">Длинный текст Длинный текст Длинный текстДлинный текст</div>
</div>
<div class="boxFix">
<div class="previewFix">Длинный текст</div>
</div>Тогда можно попробовать с flex и пустым третьим дивом:
.preview {
text-align: left;
overflow-y: hidden;
width: 380px;
margin: 0 10px;
font-size: 13px;
background-color:green;
}
.box{
height:400px;
background-color:red;
display:flex;
flex-direction:column;
justify-content:space-between;
}<div class="box">
<div class="content">
<img src="http://lorempixel.com/100/100" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, necessitatibus.</p>
</div>
<div class="preview">Длинный текст Длинный текст Длинный текстДлинный текст</div>
<div class="content0"></div>
</div>
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
- Почему SERVER_ADDR имеет не тот IP 47935 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30568 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23914 visits
- Как через css изменить цвет png изображения? 10407 visits
- Blob video url download 10006 visits
- Php curl запрос через прокси с авторизацией 9281 visits
- Работа с captcha vk api 8149 visits
© "hostciti.net" 31.3.2025 | 21:30