可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I am new in HTML.
So this question may be so much easy to answer.
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?
Thanks in advance for helping.
回答1:
How about this? I frequently use 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>
回答2:
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>
回答3:
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>
回答4:
just remove float: left and replace align with margin: 0 auto and it will be centered.
回答5:
You don't need align="center" and float:left. Remove both of these. margin: 0 auto is sufficient.
回答6:
remove float left.
Edited: removed reference to align center on an image tag.
