Html Img Align="middle" Doesn't Align An Image

July 25, 2024 Post a Comment

I want a image to be centered aligned. Image size is fixed in pixels. So what I want is like this- . What I have done is-

Solution 1:

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><imgsrc=
"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:

<divstyle="text-align: center"><imgsrc=
"http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png"width="42"height="42"></div>

Solution 2:

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

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

Solution 3:

remove float: left from image css and add text-align: center property in parent element body

<!DOCTYPE html><html><bodystyle="text-align: center;"><imgsrc="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>

Solution 4:

Change 'middle' to 'center'. Like so:

<imgalign="center"....>

Solution 5:

Try this:

style="margin: auto"

Html5 Lite