CSS 2 divs 相同的垂直居中答案

【问题标题】：CSS 2 divs same vertical centeredCSS 2 divs 相同的垂直居中
【发布时间】：2017-07-29 15:02:12
【问题描述】：

我在垂直居中两个 div 时遇到问题：

第 1 和第 2 部分：

这就是我想要实现的。我更喜欢适用于任何分辨率或随父 div 大小而变化的解决方案。

我的目标：

您可以清楚地看到差异；文本和图像正确垂直对齐。 :)

这是我的代码：

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
  </head>
  <body>
    <div class="bet-content">
      <div class="bet-prof" style="display: inline-block;">
        <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/b4/b441963ddcb84390a0caafbb7b7399b0cffbccba_medium.jpg" style="border-radius: 20px;">
      </div>
      <div class="bet-desc" style="display: inline-block;">
        <span style="font-size: 18px; display: block;">Insanic as <img src="https://csgoreaper.com/assets/images/coinflip/coin-ct.png" style="vertical-align:middle;" height="32px"></span>
        <span>With a wager of <span style="color: #e7aa18;">$20.0</span></span>
      </div>
    </div>
  </body>
</html>

【问题讨论】：

请附上您的代码。
代码？尝试使用 flex
再一次，如果没有您的代码，很难看到，但有可能将 margin-top 应用于图像。
更新了话题！

标签： html css

【解决方案1】：

想到 Flexbox：

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
  </head>
  <body>
    <div class="bet-content" style="display: flex; align-items:center;">
      <div class="bet-prof" style="display: inline-block; background: red;">
        <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/b4/b441963ddcb84390a0caafbb7b7399b0cffbccba_medium.jpg" style="border-radius: 20px;">
      </div>
      <div class="bet-desc" style="display: inline-block; background: green;">
        <span style="font-size: 18px; display: block;">Insanic as <img src="https://csgoreaper.com/assets/images/coinflip/coin-ct.png" style="vertical-align:middle;" height="32px"></span>
        <span>With a wager of <span style="color: #e7aa18;">$20.0</span></span>
      </div>
    </div>
  </body>
</html>

【讨论】：

@NabilHayek 不客气。实际上，现在我看到了，您可以从两个 flex-items 中删除 display: inline-block; 规则:)

【解决方案2】：

您应该始终包含供他人查看的代码！

无论如何，以下链接可能会有所帮助

Vertically Align Two Divs

你应该研究一下，有很多解决方案。

【讨论】：