HTML img align="middle" 不对齐图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28336888/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML img align="middle" doesn't align an image
提问by Abrar Jahin
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-
我所做的是——
<!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>
But I am getting-
但我越来越——
I want it to be responsive.
我希望它具有响应性。
Can anyone help me please?
有人可以帮我吗？
回答by Jukka K. Korpela
The attribute align=middlesets verticalalignment. To set horizontal alignment using HTML, you can wrap the element inside a centerelement and remove all the CSS you have now.
该属性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>If you would rather do it in CSS, there are several ways. A simple one is to set text-alignon a container:
如果你更愿意用 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>回答by Kagami Sascha Rosylight
How about this? I frequently use the CSS Flexible Box Layout to center something.
这个怎么样？我经常使用 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>回答by Girish
remove float: leftfrom image css and add text-align: centerproperty in parent element body
float: left从图像 css 中删除并text-align: center在父元素中添加属性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>回答by Manan
Change 'middle' to 'center'. Like so:
将“中间”更改为“中心”。像这样：
<img align="center" ....>
回答by Vadim Sychov
Try this:
尝试这个：
style="margin: auto"
回答by shadeofblack
just remove float: leftand replace align with margin: 0 autoand it will be centered.
只需删除float: left并替换 align with margin: 0 auto，它将居中。
回答by K K
You don't need align="center"and float:left. Remove both of these. margin: 0 autois sufficient.
你不需要align="center"和float:left。删除这两个。margin: 0 auto足够了。
回答by Asheliahut
remove float left.
删除浮动左侧。
Edited: removed reference to align center on an image tag.
编辑：删除了在图像标签上对齐中心的参考。
