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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 18:49:26  来源:igfitidea点击:

Float image in center

csshtml

提问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;) 添加到该段落标签吗?