如何对齐图像旁边的垂直按钮？

Question

请帮我按下按钮旁边的图像。我还想让按钮位于彼此的顶部，但在图像旁边

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

Answer 1

使用flexbox，标记更少，灵活性更高，语义更正确table

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将其从表格中取出并将导航项目放在与图像高度相同的div中，并设置vertical-align：middle;这会将元素放在父div元素

的中间

Answer 3

将此添加到您的样式表：

Table td
{
Verticale-align: middle;
}

Answer 4

＆＃13;

＆＃13;

.body{
  background-color:#dbdbdb;
}
button{
  width:200px;
  height:60px;
  margin-right:10px;
 
}
td {
  vertical-align:middle;
}

＆＃13;

</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> 
         <div>
            <button id="plan" type="button">PLANNING</button>
            <button id="strat" type="button">STRATEGY</button>
            <button id="res" type="button">RESULTS</button>
         </div>
      </td>
    </tr>
  </table>
  
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

你可以尝试垂直对齐：顶部

示例：

.body{
  background-color:#dbdbdb;
}
button{
  width:200px;
  height:60px;
  margin-right:10px;
 
}

<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 style="vertical-align:top;"> <button id="plan" type="button">PLANNING</button></td>
      <td style="vertical-align:top;"> <button id="strat" type="button">STRATEGY</button></td>
      <td style="vertical-align:top;"> <button id="res" type="button">RESULTS</button></td>
    </tr>
  </table>
  
</div>

Answer 6

#plan {
    background-color: #B21589;
    cursor: pointer;
    color: white;
    font-size: 9px;
    font-weight: bold;
    padding: 4px;
    margin-top: 2px;
    vertical-align: top;
}

链路： - Alignment of Buttons Next to Images