在中心浮动图像[重复]答案

【问题标题】：Float image in center [duplicate]在中心浮动图像[重复]
【发布时间】：2016-04-26 18:55:01
【问题描述】：

我在段落中有一个内嵌图像。我想将该图像浮动在段落的中间。我试图以...为中心

<center>

...但我看到它在 HTML5 中被贬低了。
我试着用浮动它...

<img style="float: middle;">

...但事实证明这根本不存在。

有没有一种捷径可以做到这一点，最好是在 img 标签内，比如 style 属性？
到目前为止，这是我的 HTML...

<p>
    <img id="resize" width="70%" src="../logo.png" alt="Alt" style="CENTER THIS IMAGE... SOMEHOW...">
</p>

【问题讨论】：

Orion 关闭了这个问题，但没有费心链接到原始答案。所以，这里是：stackoverflow.com/questions/28336888/…

标签： css html

【解决方案1】：

您可以使用 style="display:block; margin-left: auto; margin-right: auto;" 内联完成此操作

或将其添加到 css 类中

    .myimage {
        display:block;
        margin-left: auto;
        margin-right: auto;
    }

根据 CBore 评论更新

【讨论】：

当。打败我！
你试试 style="vertical-align: middle;"
你的代码可以放html和css吗？
自动边距也需要display:block 才能在这里工作。
CBore 是正确的我错过了那一行

【解决方案2】：

您可以将text-align: center; 添加到<p> 标记

点赞<p style="text-align:center">

【讨论】：

是的！这样可行。谢谢。

【解决方案3】：

如果你知道你想要的尺寸，你可以在左边和右边设置一个边距，等于 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>

【讨论】：

更清洁的方法，如果你不是静态设置宽度，则使用的方法是像 CBroe 所说的那样，并将 display:block 放在 CSS 的 img 中。我想我只是习惯于使用引导程序来满足我所有的居中需求

【解决方案4】：

嗯，它在一个 100% 宽度的段落内。我不确定您正在使用什么框架，但是，您可以将 css 属性 (text-align:center;) 添加到该段落标签吗？

【讨论】：

我正在使用 HTML、CSS、Bootstrap、Foundation 和 w3.css