Html 在中心浮动图像
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/34908332/
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
Float image in center
提问by rlcrews
I have an inline image in a paragraph. I want to float that image in the middle of the paragraph. I tried to center it with...
我在一个段落中有一个内嵌图像。我想在段落中间浮动该图像。我试图用...居中
<center>
...but I saw it was depreciated in HTML5.
I tried to use float it with...
...但我看到它在 HTML5 中贬值了。
我试着用浮动它...
<img style="float: middle;">
...but it turns out that that doesn't even exist.
......但事实证明,这甚至不存在。
Is there a short way to do this, preferably inside the img tag, like with the style attribute?
Here is my HTML so far...
有没有一种简短的方法可以做到这一点,最好在 img 标签内,比如使用 style 属性?
到目前为止,这是我的 HTML...
<p>
<img id="resize" width="70%" src="../logo.png" alt="Alt" style="CENTER THIS IMAGE... SOMEHOW...">
</p>
回答by rlcrews
You can do it inline using style="display:block; margin-left: auto; margin-right: auto;"
您可以使用内联方式进行 style="display:block; margin-left: auto; margin-right: auto;"
or add it to a css class
或将其添加到 css 类
.myimage {
display:block;
margin-left: auto;
margin-right: auto;
}
Updated Based on CBore comment
根据 CBore 评论更新
回答by Josh M
You could just add text-align: center;
to the <p>
tag
你可以添加text-align: center;
到<p>
标签
Like <p style="text-align:center">
喜欢 <p style="text-align:center">
回答by Devin Prejean
If you know the size you want it to be you can put a margin on left and right to equal 100. for instance
如果你知道你想要的尺寸,你可以在左边和右边放置一个等于 100 的边距。例如
<!DOCTYPE>
<html>
<head>
</head>
<style>
#resize{
margin-left:15%;
margin-right:15%;
}
</style>
<body>
<div>
<p>
<img id="resize" width="70%" src="http://codingkids.businesscatalyst.com/logo.png" alt="Alt" >
</p>
</div>
</body>
</html>
回答by Aaron Carpenter
Well, it's inside a 100% width paragraph. I'm not sure what framework you're working in, but, can you just add the css property (text-align:center;) to that paragraph tag?
嗯,它在 100% 宽度的段落内。我不确定您正在使用什么框架,但是,您可以将 css 属性 (text-align:center;) 添加到该段落标签吗?