Question

我有一个问题是将两个div彼此相邻垂直居中：

DIV 1＆amp; 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>

Answer 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>

Answer 2

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

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

Vertically Align Two Divs

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

CSS 2 divs相同的垂直居中

2 个答案: