将图像放在 div 旁边

Question

我有这个，它基本上是一个表格，有两列，我正在尽力使所述表格中的元素具有移动响应性：

 setTimeout(function() { odometer.innerHTML = '1925' })

 .fiftyFiftySection { background-color: #000; }.odometer { font-size: 3em; text-align: center; width: 180px; } table td{ column-width: 1000px; text-align: center; } #dollarSign { height: 50px; width: 30px; } #fiftyFiftySignImage { width:400px; height:300px; margin-left: -100px; } @media (max-width: 500px) { table td{ column-width: 100px; text-align: left; } #dollarSign { /* uncomment out display when you want it to display */ /* display: none; */ width: 20px; height: 20px; } #currentEstimatedPayout { display: none; } #odometer { margin-right: 50px; margin-top: 20px; } #fiftyFiftySignImage { width:300px; height:200px; margin-left: -50px; } }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/odometer@0.4.8/themes/odometer-theme-train-station.css"> <script src="https://cdn.jsdelivr.net/npm/odometer@0.4.8/odometer.min.js"></script> <section class="fiftyFiftySection" id="fiftyFiftySection"> <table> <tr> <th></th> <th></th> </tr> <tr> <td> <img id="fiftyFiftySignImage" src="https://res.cloudinary.com/piersolutions/image/upload/v1637109327/5050_frfhsy.png"> </td> <td> <h4 id="currentEstimatedPayout" style="color: #ffffff;">Current Estimated Payout</h4> <:-- <br> --> <img id="dollarSign" src="https.//res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt=""><div id="odometer" class="odometer">000000</div> </td> </tr> </table> </section>

但正如你所看到的，在移动版本上，它会将dollar sign image放在里程表的顶部，当我需要它时，我不知道如何解决这个问题。 我尝试了很多不同的东西？ 有任何想法吗？

Answer 1

添加一个div并使用 flex 对齐。

 setTimeout(function() { odometer.innerHTML = '1925' })

 .fiftyFiftySection { background-color: #000; }.odometer { font-size: 3em; text-align: center; width: 180px; } table td{ column-width: 1000px; text-align: center; } #dollarSign { height: 50px; width: 30px; } #fiftyFiftySignImage { width:400px; height:300px; margin-left: -100px; } @media (max-width: 500px) { table td{ column-width: 100px; text-align: left; } #dollarSign { /* uncomment out display when you want it to display */ /* display: none; */ width: 20px; height: 20px; } #currentEstimatedPayout { display: none; } #odometer { margin-right: 50px; margin-top: 20px; } #fiftyFiftySignImage { width:300px; height:200px; margin-left: -50px; } }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/odometer@0.4.8/themes/odometer-theme-train-station.css"> <script src="https://cdn.jsdelivr.net/npm/odometer@0.4.8/odometer.min.js"></script> <section class="fiftyFiftySection" id="fiftyFiftySection"> <table> <tr> <th></th> <th></th> </tr> <tr> <td> <img id="fiftyFiftySignImage" src="https://res.cloudinary.com/piersolutions/image/upload/v1637109327/5050_frfhsy.png"> </td> <td> <h4 id="currentEstimatedPayout" style="color: #ffffff;">Current Estimated Payout</h4> <:-- <br> --> <div style=" display; flex: justify-content; center: align-items; center: "> <img id="dollarSign" src="https.//res.cloudinary.com/piersolutions/image/upload/v1637361906/dollar-sign-2_a2hsh3.png" alt=""><div id="odometer" class="odometer">000000</div> </td> </tr> </table> </section>

Answer 2

使用此代码。

#dollarSign {
    vertical-align: middle;
}