图像在缩放时与 div 不对齐

Question

I am trying to attach the centered picture to the black div behind it, but if you make the window small (the windows width smaller), the black div will get small and will appear some space between the picture top left and right edges and the black div.It does not stay fixed right near the div.

How should I fix this? Thank you. Please see it in full page and then in small page. See example here:

 .f-content { margin-top: 5%; text-align: center; display: inline-block; width: 100%; background-color: #1C2431; }

 <div class="f-content"> <div style="float: left; color:white;">FOOTER LEFT</div> <img src="http://curier.cumparamlaptopuri.ro/1.png" alt="" width="40%" height="auto" style="margin-top: -26px; position: inherit;" /> <div style="float: right;color:white;">FOOTER RIGHT</div> <div style="clear: right;"></div> </div>

Answer 1

May I suggest something like this:

 .f-content { margin-top: 5%; text-align: center; display: inline-block; width: 100%; background-color: #1C2431; position: relative; } img { position: absolute; margin: 0 auto; left: 0; right: 0; margin-top: -1.9%; }

 <div class="f-content"> <div style="float: left; color:white;">FOOTER LEFT</div> <img src="http://curier.cumparamlaptopuri.ro/1.png" alt="" width="40%" height="auto"> <div style="float: right;color:white;">FOOTER RIGHT</div> <div style="clear: right;"></div> </div>

Answer 2

I would recommend setting a responsive width to the left and right divs. That way the black bar doesn't expand in height. I added in 20% for each but you can change this if needed.

<div class="f-content">
<div style="float: left; color:white; width:20%;">FOOTER LEFT</div>
<img src="http://curier.cumparamlaptopuri.ro/1.png" alt="" width="40%" height="auto" style="margin-top: -26px; position: inherit;" />
<div style="float: right;color:white; width: 20%;">FOOTER RIGHT</div>
<div style="clear: right;"></div>
</div>