我在垂直居中并排放置 2 个 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>最佳答案
我想到了 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>关于html - CSS 2 div 相同的垂直居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42681593/