Vertically align content & 2 lines of text - html

Question

I have 5 boxes that contain text that changes on hover.
However if the 'content' of a box has more than one line, it pushes the other boxes down slightly.
Also, how do I center the content vertically? Line-height does the job-ish but some of the text is more than one line. Also vertical-align seems to apply to the whole div rather than just the text in content
.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>
Here's the CSS, identical for all 5 boxes except different content.
Having massive difficulties sorting this as searching for "content" on Google doesn't really come up with the CSS "content"
Here's a fiddle: https://jsfiddle.net/su8bytdc/7/

Answer 1

Simply add display: flex and align-items: center to your :after selector and position: relative to your div .image.
To align the content horizontally just add text-align: center to .image and justify-content: center to the :after element
So your updated code would look something like this
.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

Ok, so try adding vertical-align: top to your image class
.image{
vertical-align: top;
}

Answer 3

To fix the line-wrap issue, just put overflow: hidden on the container element. Beware, however that this will prevent all text from overflowing meaning if you later want to have a lot of text inside a box it will be hidden.
To center text inside of the box remove width and height from the pseudo elements and use the transform hack. Use this on the elements you want to center (remember to make its container relative):
position: absolute; (relative could also work here)
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Finally, all of these issues are no longer issues when using flexbox, so I would suggest learning that since it's awesome.

Answer 4

Try this:-
.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 5

https://jsfiddle.net/4tmx5f46/
font-family: "Verdana", Geneva, sans-serif;
vertical-align:middle;
The font declaration was causing the dropdown of the boxes. You'll need 'vertical-align:middle;' on the boxes themselves to prevent this.
Aligning the content in the middle with vertical-align is likely a bad idea here. Vertical Align can be a real scumbag.
source: http://christopheraue.net/2014/03/05/vertical-align/
That said, You should check out this guide.
https://css-tricks.com/centering-css-complete-guide/
if you insist on centering it this way, then I would suggest you modify the content being placed by using a conjunction of ::before and ::after -> Using ::before to knock everything down by 50%, and then starting the ::after with the real content.
(or just absolutely position, transform, and be done with it)
If you want an example of what I'm describing, comment, and I'll crank out something for you.
Apologies for the mixup earlier. Grabbed a wrong tab's URL