Вертикально выровнять содержимое и 2 строки текста

Question

У меня есть 5 ящиков, содержащих текст, который изменяется при наведении.

Однако, если «содержимое» коробки имеет более одной строки, оно слегка сдвигает другие блоки.

Также, как я могу сосредоточить содержимое по вертикали? Строка-высота выполняет задание, но часть текста содержит более одной строки. Кроме вертикальное выравнивание, кажется, относится ко всему DIV, а не только текст по содержанию

.image { 
 
    width: 204px; 
 
    height: 204px; 
 
    background-image: url('imglink'); 
 
    display: inline-block; 
 
    background-repeat: no-repeat; 
 
    margin-left: 22px; 
 
    margin-right: 22px; 
 
    font-family: "Verdana", Geneva, sans-serif; 
 
    color: white; 
 
    font-size: 11pt; 
 
    } 
 

 
    .image:hover{ 
 
    cursor: pointer; 
 
    
 
    } 
 

 
    .image:after { 
 
    width: 204px; 
 
    height: 204px; 
 
    display: inline-block; 
 
    background-repeat: no-repeat; 
 
    /* Content is inserted */ 
 
    content: 'This text is already there'; 
 

 
    } 
 

 
    .image:hover:after{ 
 
    background-image: url('/imglink'); 
 
    cursor: pointer; 
 
    content: 'This text will appear on hover'; 
 

 
    }

<div class="image"> 
 
    </div>

Вот CSS, одинаковый для всех 5 ящиков, кроме различного содержания. Имея огромные трудности, сортировочные это как поиск «содержание» на Google действительно не придумать с CSS «содержанием»

Вот скрипка: https://jsfiddle.net/su8bytdc/7/

Answer 1

Просто добавьте display: flex и align-items: center к вашему: после выбора и position: relative вашего DIV .image.

Для выравнивания содержимого по горизонтали просто добавить text-align: center к .image и justify-content: center к: после элемента

Таким образом, ваш обновленный код будет выглядеть примерно как этот

.image { 
 
    position: relative; 
 
    width: 204px; 
 
    height: 204px; 
 
    display: inline-block; 
 
    background-color: red; 
 
    margin-left: 22px; 
 
    display: inline-block; 
 
    margin-right: 22px; 
 
    font-size: 11pt; 
 
    cursor: pointer; 
 
    text-align: center; 
 
} 
 
.image:after { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    /* Content is inserted */ 
 
    content: 'This text is already there Even multiple lines'; 
 
} 
 
.image:hover:after { 
 
    text-align: center; 
 
    content: 'This text will appear on hover'; 
 
}

<div class="image"> 
 
</div> 
 
<div class="image"> 
 
</div> 
 
<div class="image"> 
 
</div> 
 
<div class="image"> 
 
</div> 
 
<div class="image"> 
 
</div>

Answer 2

Итак, попробуйте добавить vertical-align: top к классу изображений

.image{ 
    vertical-align: top; 
} 

Answer 3

Попробуйте это: -

.image img { 
 
    position: relative; 
 
    top: 50%; 
 
    -webkit-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
} 
 
==================================== 
 
    Base styling, to make the demo more fancy 
 
    ==================================== */ 
 
body { 
 
    font-family: Roboto, sans-serif; 
 
    background: #2C3D51; 
 
    padding: 1em; 
 
    -webkit-font-smoothing: antialiased; 
 
    
 
} 
 

 

 

 
h2 p { 
 
text-align:center; 
 
    margin: 0; 
 
    font-size: 16px; 
 
    position: absolute; 
 
    top: 5px; 
 
    right: 5px; 
 
    font-weight: bold; 
 
    color: #ECF0F1; 
 
} 
 

 
section { 
 
    display: block; 
 
    max-width: 500px; 
 
    background: #E74C3C; 
 
    margin: 0 auto 15px; 
 
    height: 150px; 
 
    border-radius: .2em; 
 
    position: relative; 
 
    color: white; 
 
    text-align:center; 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
}

<section class="text"> <h2>Text</h2> <p>I'm vertically aligned! Hi ho Silver, away!</p></section><section class="image"> <h2>Images</h2> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=120%C3%9770&w=120&h=70">

Answer 4

Чтобы исправить проблему переноса строки, просто поместите overflow: hidden на элемент контейнера. Остерегайтесь, однако, что это предотвратит переполнение текста из текста, если позже вы захотите иметь много текста внутри коробки, он будет скрыт.

Чтобы центрировать текст внутри поля, удалите ширину и высоту из псевдоэлементов и используйте взлом для преобразования. Используйте это на элементы, которые вы хотите, чтобы центр (не забудьте сделать его контейнера относительно):

position: absolute; (relative could also work here) 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 

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

Answer 5

https://jsfiddle.net/4tmx5f46/

font-family: "Verdana", Geneva, sans-serif; 
    vertical-align:middle; 

Декларация шрифта причинял выпадающий список из коробки. Вам понадобится «vertical-align: middle;» на самих коробках, чтобы предотвратить это.

Выравнивание содержимого в середине с выравниванием по вертикали, вероятно, является плохими. Вертикальное выравнивание может быть настоящим отморозком.

Источник:http://christopheraue.net/2014/03/05/vertical-align/

Тем не менее, Вы должны проверить это руководство. https://css-tricks.com/centering-css-complete-guide/

---

, если вы настаиваете на центрирование это так, то я хотел бы предложить вам изменить содержание размещаемых с помощью конъюнкции :: до и после :: -> Использование :: до того, чтобы сбить все вниз на 50%, а затем начиная с :: после с реальным содержанием.

(или просто абсолютно позиции, преобразования и сделать с ней)

Если вы хотите пример того, что я описываю, комментарий, и я провернуть кое-что для вас.

---

Извинения за перепутывание ранее. Захваченный URL вкладки неверном в