HTML img align middle doesn t align an image

Question

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-           lt  DOCTYPE html gt   lt html gt   lt body gt        lt 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            gt    lt  body gt   lt  html gt    But I am getting-    I want it to be responsive   Can anyone help me please

User · Accepted Answer

How about this  I frequently use the CSS Flexible Box Layout to center something    x000D   x000D   lt div style  display  flex  justify-content  center   gt  x000D     lt img src  http   icons iconarchive com icons rokey popo-emotions 128 big-smile-icon png  style  width  40px  height  40px     gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You don t need align  center  and float left  Remove both of these  margin  0 auto is sufficient

User · Answer

remove float left   Edited  removed reference to align center on an image tag

User · Answer

remove float  left from image css and add text-align  center property in parent element body   x000D   x000D           lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt body style  text-align  center   gt  x000D   x000D       lt img x000D          src  http   icons iconarchive com icons rokey popo-emotions 128 big-smile-icon png  x000D          width  42  height  42  x000D          align  middle  x000D          style   x000D             x000D            display  block  x000D            margin-left  auto  x000D            margin-right  auto  x000D            z-index  1   x000D           gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

just remove float  left and replace align with margin  0 auto and it will be centered

User · Answer

Change  middle  to  center   Like so    lt img align  center       gt

User · Answer

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    x000D   x000D   lt center gt  lt img src  x000D   http   icons iconarchive com icons rokey popo-emotions 128 big-smile-icon png  x000D  width  42  height  42  gt  lt  center gt  x000D   x000D   x000D    If you would rather do it in CSS  there are several ways  A simple one is to set text-align on a container    x000D   x000D   lt div style  text-align  center  gt  lt img src  x000D   http   icons iconarchive com icons rokey popo-emotions 128 big-smile-icon png  x000D  width  42  height  42  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Try this   style  margin  auto

[html] HTML img align="middle" doesn't align an image

Examples related to html

Examples related to css

Examples related to image