Question

我是HTML新手。

所以这个问题可能很容易回答。

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

所以我想要的就像这样 -

我所做的是 -

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

属性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 2

这个怎么样？我经常使用CSS Flexible Box Layout来集中内容。

＆＃13;

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

＆＃13;

Answer 3

从图片css中删除float: left并在父元素text-align: center中添加body属性

＆＃13;

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

＆＃13;

Answer 4

删除左边的浮动。

已编辑：已移除参考以在图像标记上对齐中心。

Answer 5

只需删除float: left并将margin: 0 auto替换为对齐，它就会居中。

Answer 6

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

Answer 7

将“中间”更改为“中心”。像这样：

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

Answer 8

尝试一下：

style="margin: auto"

HTML img align =“middle”无效

8 个答案: