How to move second image to center of div [responsive design]? - html

Question

How to move second image to center of div [responsive design] ?
https://jsfiddle.net/ydufL6o2/
I have 3 image,
first image position is left. It's ok.
third image position is right. It's ok.
But i have issue on second image, how can i move second image to center [responsive design] ?
<div style="position: relative;width: 100%;height: 40px;text-align: center;background-color: #373737;padding: 10px 0px;">
<div style=" display: block; position: relative; margin: 4px 0px; float: left; margin-left: 1.5%;">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="/* margin: 16px auto; */height: 31px;border: none;width: 31px;" height="31px" width="111px">
</div>
<div style=" display: block; position: relative; margin: 4px auto; float: left; ">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="width: 31px;height: 31px;border: none;" height="31px" width="111px">
</div>
<div style=" display: block; position: relative; margin: 4px 10px; float: right; margin-right: 1.5%; ">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="/* margin: 16px auto; */height: 31px;border: none;width: 31px;" height="31px" width="111px">
</div>
</div>

Answer 1

If you want to make element centered you can use margin: 0 auto, however - since your element is blocked it will take 100% of the width.
You can change that element to be inline-block and then use the margin: 0 auto to do the trick.
<div style="position: relative;width: 100%;height: 40px;text-align: center;background-color: #373737;padding: 10px 0px;">
<div style=" display: block; position: relative; margin: 4px 0px; float: left; margin-left: 1.5%;">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="/* margin: 16px auto; */height: 31px;border: none;width: 31px;" height="31px" width="111px">
</div>
<div style=" display: inline-block; position: relative; margin: 4px auto; ">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="width: 31px;height: 31px;border: none;" height="31px" width="111px">
</div>
<div style=" display: block; position: relative; margin: 4px 10px; float: right; margin-right: 1.5%; ">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="/* margin: 16px auto; */height: 31px;border: none;width: 31px;" height="31px" width="111px">
</div>
</div>
Regarding the comment about the 100%-width input in the center - check this fiddle:
https://jsfiddle.net/62b6prwo/

Answer 2

Remove the: float:left;
from the division and adjust the margin and padding to get the desired output.

Answer 3

You can do it like this :
<div style="position: relative;width: 100%;height: 40px;text-align: center;background-color: #373737;padding: 10px 0px;">
<div style="
display: block;
position: relative;
margin: 4px 0px;
float: left;
margin-left: 1.5%;
">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="/* margin: 16px auto; */height: 31px;border: none;width: 31px;" height="31px" width="111px">
</div>
<div style="
display: block;
position: absolute;
left: 0;
right: 0;
margin: 4px 0 4px ;
">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="width: 31px;height: 31px;border: none;" height="31px" width="111px">
</div>
<div style="
display: block;
position: relative;
margin: 4px 10px;
float: right;
margin-right: 1.5%;
">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="/* margin: 16px auto; */height: 31px;border: none;width: 31px;" height="31px" width="111px">
</div>
</div>
It sets the middle div to absolute, allowing you to move it to the center of the wrapper, by using left: 0; and right: 0;

Answer 4

This works, play around with the margin settings so you can position the third image without using negative top margin.
<div style="position: relative;width: 100%;height: 40px;text-align: center;background-color: #373737;padding: 10px 0px;">
<div style=" display: block; position: relative; margin: 4px 0px; float: left; margin-left: 1.5%;">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="/* margin: 16px auto; */height: 31px;border: none;width: 31px;" height="31px" width="111px">
</div>
<div style=" display: block; position: relative; margin: 4px auto; text-align: center; ">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="width: 31px;height: 31px;border: none;" height="31px" width="111px">
</div>
<div style=" display: block; position: absolute; right: 10px; margin-top: -35px; margin-right: 1.5%; ">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="/* margin: 16px auto; */height: 31px;border: none;width: 31px;" height="31px" width="111px">
</div>
</div>

Answer 5

Remove the float:left; on the middle div, and change the margin to margin:auto;.
Change the display on the divs from display:block; to display:inline; so they remain next to one another.
Change the middle image to position:relative; and add top:4px; to position vertically.
<div style="position: relative;width: 100%;height: 40px;text-align: center;background-color: #373737;padding: 10px 0px;">
<div style="
display: inline;
position: relative;
margin: 4px 0px;
float: left;
margin-left: 1.5%;
">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="/* margin: 16px auto; */height: 31px;border: none;width: 31px;" height="31px" width="111px">
</div>
<div style="
display: inline;
position: relative;
margin:auto;
">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="width: 31px;height: 31px;border: none; position:relative; top:4px;" height="31px" width="111px">
</div>
<div style="
display: inline;
position: relative;
margin: 4px 10px;
float: right;
margin-right: 1.5%;
">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="/* margin: 16px auto; */height: 31px;border: none;width: 31px;" height="31px" width="111px">
</div>
</div>
Please see:
https://jsfiddle.net/ydufL6o2/4/

Answer 6

NOTE
Inline styling is NOT the way to style elements. It should be done in the stylesheet or in the style tags in the head part of the HTML. Here is the proper code.
Basically I cleaned up your code A LOT by adding IDs and classes.
What you had to do is remove the float: left property from the middle div.
After that, you have to change the display: block; to display: inline-block, as I did in the childDiv class divs.
That solves the problem, as shown in this snippet.
#parentDiv {
position: relative;
width: 100%;
height: 40px;
text-align: center;
background-color: #373737;
padding: 10px 0px;
}
.childDiv {
display: inline-block;
position: relative;
margin: 4px 0px;
}
img {
height: 31px;
border: none;
width: 31px;
}
<div id="parentDiv">
<div class="childDiv" style="float: left; margin-left: 1.5%;">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg">
</div>
<div class="childDiv">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg">
</div>
<div class="childDiv" style="float: right; margin-right: 1.5%;">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg">
</div>
</div>