Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML img align="middle" doesn't align an image

Tags:

html

css

image

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?

like image 309
Abrar Jahin Avatar asked Feb 05 '15 05:02

Abrar Jahin


1 Answers

The attribute align=middle sets vertical alignment. To set horizontal alignment using HTML, you can wrap the element inside a center element and remove all the CSS you have now.

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

If you would rather do it in CSS, there are several ways. A simple one is to set text-align on a container:

<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>
like image 170
Jukka K. Korpela Avatar answered Oct 13 '22 00:10

Jukka K. Korpela