用css居中两个div [重复]答案

【问题标题】：Centering two divs with css [duplicate]用css居中两个div [重复]
【发布时间】：2020-11-07 15:03:38
【问题描述】：

肯定有一个简单的响应，但我无法让divs 都居中。我使用了内联块、浮点数，甚至尝试使用 CSS 网格。我需要将美元符号与数字分开，因为我想对数字产生 jQuery 效果，但如果我包含美元符号，它不会将其识别为数字。

我只想让divs 在屏幕上居中。

text-align: center; 似乎不起作用

#dollar_sign {
  display: inline-block;
  margin: 0 auto;
  font-size: 150px;
  color: rgb(0, 255, 0);
}

#num {
  display: inline-block;
  margin: 0 auto;
  font-size: 150px;
  color: rgb(0, 255, 0);
}

<div id="big_number">
  <div id="dollar_sign">$</div>
  <div id="num">1,000,000</div>
</div>
<div style="clear: both;"></div>

【问题讨论】：

您用来使 div 居中的 CSS 在哪里？我没有看到你甚至试图这样做的代码......
@FluffyKitten 看起来 OP 试图使用 margin: 0 auto 来做这件事。
当您使用inline-block 时，您将text-align:center 放入容器而不是div 本身。
@disinfor 不是 margin: auto inline-block 元素的默认值吗？
@FluffyKitten 不，它在盒子模型上计算为0，但没有为边距分配实际值，因为内联块元素的 inside被计算为块级元素，但 outside 被计算为内联元素。

标签： html css

【解决方案1】：

您可以为此使用flex：

#big_number {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

#dollar_sign {
  font-size: 150px;
  color: rgb(0, 255, 0);
}

#num {
  font-size: 150px;
  color: rgb(0, 255, 0);
}

<div id="big_number">
  <div id="dollar_sign">$</div>
  <div id="num">1,000,000</div>
</div>
<div style="clear: both;"></div>

基本上，将flex-row 设置为不换行，然后将内容对齐到中心。

一些关于 flexbox 的好读物：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

感谢您的提示！玩代码的时间比我想承认的要长得多。

【解决方案2】：

使用弹性盒

#big_number {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#dollar_sign {
    font-size: 150px;
    color: rgb(0, 255, 0);
}

#num {
    font-size: 150px;
    color: rgb(0, 255, 0);
}

<div id="big_number">
    <div id="dollar_sign">$</div>
    <div id="num">1,000,000</div>
</div>
<div style="clear: both;"></div>

参考https://www.w3schools.com/css/css3_flexbox.asp

【讨论】：

【解决方案3】：

#big_number {text-align: center;}

将此添加到您的 CSS 中应该可以修复它。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- || METADATA || -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- || STYLESHEETS || -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      <!--
      Page
      title
      --
    />
    <title>Title</title>

    <!-- || CSS || -->
    <style>
      #dollar_sign {
        display: inline-block;
        margin: 0 auto;
        font-size: 150px;
        color: rgb(0, 255, 0);
      }
      #num {
        display: inline-block;
        margin: 0 auto;
        font-size: 150px;
        color: rgb(0, 255, 0);
      }
      #big_number {
        text-align: center;
      }
    </style>
  </head>

  <body>
    <!-- || BODY || -->
    <div id="big_number">
      <div id="dollar_sign">$</div>
      <div id="num">1,000,000</div>
    </div>
    <div style="clear: both;"></div>
  </body>
</html>

【讨论】：

【解决方案4】：

#big_number {
    margin: auto;
    text-align: center;
}

#dollar_sign {
    display: inline-block;
    margin: 0 auto;
    font-size: 15px;
    color: rgb(0, 255, 0);
}
#num {
    display: inline-block;
    margin: 0 auto;
    font-size: 15px;
    color: rgb(0, 255, 0);
}

你只需要：

#big_number {
    margin: auto;
    text-align: center;
}

【讨论】：