how can i vertical align this image that is already horizontally aligned with display: block; margin-left: auto; margin-right: auto;
NOTE THAT I CANT USE top:50% left:50% transform: translate(-50%,-50%) or any display with flex methods.
fiddle : https://jsfiddle.net/3mLsL9t5/2/
CSS
.myContainer {
width: 100px;
height: 100px;
background-color: lightblue;
}
.myImage {
width: auto;
max-width: 20px;
height: auto;
max-height: 22px;
border: 1px solid lightslategrey;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
}
please try below css
.myImage {
border: 1px solid lightslategrey;
display: block;
height: 20px;
line-height: 50px;
margin: 0 auto;
text-align: center;
vertical-align: middle;
width: 20px;
}
.myContainer {
background-color: lightblue;
display: table-cell;
height: 100px;
position: relative;
vertical-align: middle;
width: 100px;
}
Here we go ... just let the image be an image (inline) and add this to your .myContainer
display: table-cell;
text-align: center;
vertical-align: middle;
Sample snippet
.myContainer { width: 100px; height: 100px; background-color: lightblue; display: table-cell; text-align: center; vertical-align: middle; } .myImage { width: auto; max-width: 20px; height: auto; max-height: 22px; border: 1px solid lightslategrey; }
<div class='myContainer'> <img class='myImage' src='https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/sidebar-smashingconf-oxford.png'> </div>
Update
Or you can use line-height
.myContainer { width: 100px; height: 100px; background-color: lightblue; text-align: center; line-height: 111px; } .myImage { width: auto; max-width: 20px; height: auto; max-height: 22px; border: 1px solid lightslategrey; }
<div class='myContainer'> <img class='myImage' src='https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/sidebar-smashingconf-oxford.png'> </div>
If you still need some block behavior, you can add display: inline-block;
to the image
Update 2
As you asked about block element, I added a version showing that too.
.myContainer { width: 100px; height: 100px; background-color: lightblue; display: table-cell; vertical-align: middle; } .myImage { display: block; margin: 0 auto; width: auto; max-width: 20px; height: auto; max-height: 22px; border: 1px solid lightslategrey; }
<div class='myContainer'> <img class='myImage' src='https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/sidebar-smashingconf-oxford.png'> </div>
This can be easily achieved using the CSS for the image:
position: absolute,
left:0,
right:0,
top:0,
bottom:0,
margin:auto
and position:relative
for the container.
.myContainer { width: 100px; height: 100px; background-color: lightblue; position: relative; } .myImage { width: auto; max-width: 20px; height: auto; max-height: 22px; border: 1px solid lightslategrey; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
<div class='myContainer'> <img class='myImage' src='https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/sidebar-smashingconf-oxford.png'> </div>
Please check here Working fiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.