Abrar Jahin Abrar Jahin - 2 months ago 8
CSS Question

HTML img align="middle" not working

I am new in HTML.

So this question may be so much easy to answer.

I want a image to be centered aligned. Image size is fixed in pixels.

So what I want is like this-

1.

What I have done is-

<!DOCTYPE html>
<html>
<body>

<img
src="http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png"
width="42" height="42"
align="middle"
style="float: left;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;"
>

</body>
</html>


But I am getting-

22

I want it to be responsive.

Can anyone help me please?

Thanks in advance for helping.

Answer

How about this? I frequently use CSS Flexible Box Layout to center something.

<div style="display: flex; justify-content: center;">
  <img src="http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png" style="width: 40px; height: 40px;" />
</div>

Comments