<分区>
html - 如何对齐图像旁边的垂直按钮？
请帮我对齐按钮旁边的图像。我还想让按钮彼此重叠，但在图像旁边
.body{
background-color:#dbdbdb;
}
button{
width:200px;
height:60px;
margin-right:10px;
}</div>
<div class="body">
<table>
<tr>
<td><img id="business"src="http://fullhdpictures.com/wp-content/uploads/2016/08/Business-People-Photos-HD.jpg"/></td>
<td> <button id="plan" type="button">PLANNING</button></td>
<td> <button id="strat" type="button">STRATEGY</button></td>
<td> <button id="res" type="button">RESULTS</button></td>
</tr>
</table>
</div> 
最佳答案
使用flexbox，比table更少的标记，更好的灵 active 和语义更正确
.body {
display: flex;
}
.body > div {
display: flex;
flex-direction: column;
justify-content: center;
}
button {
width: 200px;
height: 60px;
margin-right: 10px;
}
/* for demo purpose I made image smaller so one can see the layout */
.body > img {
display: block;
width: 420px;
height: 276px;
}<div class="body">
<img id="business" src="http://fullhdpictures.com/wp-content/uploads/2016/08/Business-People-Photos-HD.jpg" />
<div>
<button id="plan" type="button">PLANNING</button>
<button id="strat" type="button">STRATEGY</button>
<button id="res" type="button">RESULTS</button>
</div>
</div>关于html - 如何对齐图像旁边的垂直按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40346890/