HTML img align="middle" 没有对齐图像

Question

我希望图像居中对齐。图片大小以像素为单位固定。

所以我想要的是这样-

.

我所做的是-

        <!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>

但我越来越-

我希望它能够响应。

有人能帮帮我吗？

Answer 1

移除左侧浮动。

已编辑：删除了对图像标签居中对齐的引用。

Answer 2

从图像 css 中删除 float: left 并在父元素 body

中添加 text-align: center 属性

        <!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>

Answer 3

只需删除 float: left 并将对齐替换为 margin: 0 auto 即可居中。

Answer 4

您不需要 align="center" 和 float:left。删除这两个。 margin: 0 auto 就够了。

Answer 5

这个怎么样？我经常使用 CSS 灵活的盒子布局来居中一些东西。

<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>

Answer 6

属性align=middle设置垂直对齐。要使用 HTML 设置水平对齐方式，您可以将元素包裹在 center 元素内，并删除您现在拥有的所有 CSS。

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

如果您更愿意在 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>

Answer 7

将 'middle' 更改为 'center'。像这样：

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

Answer 8

试试这个：

style="margin: auto"

Answer 9

在图片标签中我们使用 align:center 属性使图片居中

<img alt='Logo' src={ logo } width='254.53px' height='56px' align={ 'center' }/>

HTML img align="middle" 没有对齐图像

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

html

css

image