Geek Answers Handbook

HTML img align = "middle" does not align the image

I want the image centered. Image size is fixed in pixels.

So what I want is like this-

1.

What i did 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'm getting-

22

I want it to be responsive.

Can anybody help me?

+11
source share
8 answers

How about this? I often 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>
Run codeHide result
+21
source

The attribute align=middlesets the vertical alignment. To set horizontal alignment using HTML, you can wrap the element inside the element centerand remove all the CSS you have.

<center><img src=
"http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png"
width="42" height="42"></center>
Run codeHide result

CSS, . text-align :

<div style="text-align: center"><img src=
"http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png"
width="42" height="42"></div>
Hide result
+26

float: left css text-align: center body

        <!DOCTYPE html>
<html>
<body style="text-align: center;">

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

</body>
</html>
Hide result
+5

float .

: .

0

float: left align margin: 0 auto, .

0

align="center" float:left. . margin: 0 auto.

0

"" "". :

<img align="center" ....>
0

:

style="margin: auto"
0

More articles:


All Articles