Page 98 - CSS

width: 100%;
}

Link to JSFiddle

The main points are the 3 .thumb, .details and .position-container containers:

• The .position-container must have display: table.

• The .details must have the real width set width: .... and display: table-cell, vertical-
align: middle.

• The .thumb must have width: 100% if you want that it will take all the remaining space and it
will be influenced by the .details width.

• The image (if you have an image) inside .thumb should have width: 100%, but it is not
necessary if you have correct proportions.

Vertical align anything with 3 lines of code

Supported by IE11+

View Result

Use these 3 lines to vertical align practically everything. Just make sure the div/image you apply
the code to has a parent with a height.

CSS

div.vertical {
position: relative;
top: 50%;
transform: translateY(-50%);
}

HTML

<div class="vertical">Vertical aligned text!</div>

Vertically align an image inside div

HTML

<div class="wrap">
<img src="http://lorempixel.com/400/200/" />
</div>

CSS

.wrap {

https://riptutorial.com/ 76