CSS - center and rounded Img Inside Div - html

Question

I have an Img inside a Div on my webpage, the image appears inside the div, but the alignment is off depending on the browser width.
this is my code:
<div class="w3-row" style="100%; background-color: #fff; margin-top: 5px; height: 100px; padding: 5px;">
<div class="w3-col w3-container w3-green" style="width: 15%; height: 100%;">
<div>
<img class="" src="../images/Joanne.jpg" alt="Chania" style="height: 80px; display: block; margin-left: auto; margin-right: auto;">
</div>
</div>
<div class="w3-col w3-container w3-red" style="width: 85%; height: 100%;">
</div>
</div>
I was wondering if there was a way I could vertically and horizontally align the Image inside that Div, and maybe also have the image with rounded corners.
I have searched around but nothing I try works, I thought by setting the margin left and right to 'auto' would solve my problem, but the image is still off when I resize the browser.
Any help or advice is appreciated.
Demo:https://jsfiddle.net/jjxbm7j7/

Answer 1

For a rounded image - use the border-radius property
For a vertically centered image - Use display:flex and align-items:center on the parent element of the image that has a specified height.
For a horizontally centered image - display:flex and justify-content:center on the parent element of the image that has a specified width.
However, for your example, I used margin:auto, because it is actually simpler.
For more information for flex stuff, click here: http://www.w3schools.com/css/css3_flexbox.asp
It should look like this:
.image {
border-radius: 50px;
}
.w3-col.w3-container.w3-green {
display: flex;
align-items: center;
margin: auto;
}
.w3-row {
border: 1px solid #aaa;
}
<div class="w3-row" style="100%; background-color: #fff; margin-top: 5px; height: 100px; padding: 5px;">
<div class="w3-col w3-container w3-green" style="width: 15%; height: 100%;">
<div>
<img class="image" src="http://s33.postimg.org/vnc0xbztb/Joanne.jpg
" alt="Chania" style="height: 80px; display: block; margin-left: auto; margin-right: auto;">
</div>
</div>
<!--<div class="w3-col w3-container w3-red" style="width: 85%; height: 100%;">
</div>-->
</div>
I added the 1px border property for clarity.

Answer 2

Perfectly Center your Image inside a DIV using transform: scale()
I have created a box inside that i have placed your image to show how to center the image inside the div(class="box") .
body{
width: 100%;
height: 100vh;
margin: 0;
}
.w3-row {
display: flex; //flexBox
align-items: center;
justify-content: center;
flex-direction: column; //Works as a Stack i.e Image at the Top and Description at the bottom
}
For Scaling Image using CSS Transformations
.image{
width: 100%;
height: auto;
transform: scale(.5); //change the scale value to change size of the Image 0<scale<1
}
For Rounded Image
.img-rounded{
border-radius: 50%
}
Working Fiddle: https://jsfiddle.net/rittamdebnath/jjxbm7j7/3/

Answer 3

before anything it's not good approach to write inline CSS but anyway you can use vertical align way on an sudo element (after) like so
.image {
border-radius: 50px; //adjust yourself
display: inline-block;
vertical-align: middle;
}
.w3-col.w3-container.w3-green{
text-align:center;
height:100px;
border:1px solid;
width:100%;
}
.w3-col.w3-container.w3-green:after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
<div class="w3-row" style="100%; background-color: #fff; margin-top: 5px; height: 100px; padding: 5px;">
<div class="w3-col w3-container w3-green" style="width: 15%; margin:auto;">
<img class="image" src=" http://s33.postimg.org/vnc0xbztb/Joanne.jpg" alt="Chania" style="height: 80px; ">
</div>
<div class="w3-col w3-container w3-red" style="width: 85%; height: 100%;">
</div>
</div>