HTML img align=“middle” doesn't align an image

后端 未结 8 1247
臣服心动
臣服心动 2021-02-07 13:26

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

So what I want is like this-

\"1\".

相关标签:
8条回答
  • 2021-02-07 13:47

    remove float left.

    Edited: removed reference to align center on an image tag.

    0 讨论(0)
  • 2021-02-07 13:56

    remove float: left from image css and add text-align: center property in parent element 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>

    0 讨论(0)
  • 2021-02-07 13:58

    Try this:

    style="margin: auto"
    
    0 讨论(0)
  • 2021-02-07 13:59

    How about this? I frequently use the 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>

    0 讨论(0)
  • 2021-02-07 13:59

    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>

    0 讨论(0)
  • 2021-02-07 14:00

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

    <img align="center" ....>
    
    0 讨论(0)
提交回复
热议问题