将图像放在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;
}