如何同时使用显示内联和边距/文本对齐答案

【问题标题】：How to use both display inline and margins/text-align如何同时使用显示内联和边距/文本对齐
【发布时间】：2021-02-03 03:44:54
【问题描述】：

所以我试图以 5 × 5 的形式创建一个乘法方程，但由于 h2 标签是块级元素，它们开始一个新行。我尝试使用 display: inline 和 display:inline-block 边距（margin-left 和 margin: auto），使用 h2 和 .equation 作为选择器，但它没有做任何事情。使用 text-align 也没有做任何事情。没有浮动中心选项，所以这也不起作用。有点帮助？

<div class="equation">
    <h2 id="num1" class="num1multiply"></h2>
    <h2 id="msign">×</h2>           
    <h2 id="num2" class="num2multiply"></h2>
</div>

CSS：

h2 {
    display: inline;
}

【问题讨论】：

'inline' 属性只接受两侧（左侧和右侧）的填充和边距。使用 'inline-block' 元素应用所有边。
嗨，如果我尝试使用 margin: auto，那么由于某种原因没有任何反应。这对我来说没有意义。
'margin:atuto' 仅适用于指定宽度的元素。一般div 会自动获得 100% 的宽度。所以inline-block你需要指定宽度，然后自动应用边距。
所以你需要将所有这些标题放在一行中。
显示怎么样：flex

标签： html css

【解决方案1】：

如果你想内联所有元素，那么flex-box 是最好的选择。您可以通过将其添加到您的样式表来做到这一点。

.equation {
    display: flex;
    align-items: center;
    justify-content: center;
}

如果你不想使用 flexbox。然后display: inline-block 和float 会有所帮助。示例将是。

h2 {
    display: inline-block;
    float: left;
}

注意：这仅用于示例目的。不要尝试直接在h2标签上应用样式，样式会应用到页面的所有h2元素上

如果您希望它应用于.equation 内的h2 标记，请像这样使用它

.equation h2 {
    display: inline-block;
    float: left;
}

【讨论】：

嗨，我正在尝试使用 flex，但项目未与中心对齐。 .equation { 显示：弹性；对齐项目：居中； }
去掉边距不是更好吗？在所有 h2 元素上设置边距：0。
flex会起作用，一定要看看页面上其他元素的样式是否有问题。
您好，没有样式冲突。我确实知道可能出了什么问题。当我检查元素并切换 flexbox 荧光笔（按下 div 标签旁边的 flex）时，框的右侧有一个紫色图案，而带有标题的部分没有这种图案。这意味着什么？
如果您正在进行实时项目，那么我可以提供帮助。但问题不在于 flexbox

【解决方案2】：

而不是 h2 使用标签或跨度并相应地设置字体

【讨论】：