如何将表格列中的上下箭头居中并调整其尺寸？

核心问题分析 #

1. 箭头未居中：column1的float布局导致row高度未被正确撑开，且column2的width:auto无法占据剩余空间，再加上<br>标签干扰了flex的垂直排列逻辑，导致居中失效。
2. 箭头尺寸无法修改：height:115%基于父元素高度计算，但父元素高度未明确，导致尺寸异常；百分比宽度也会因父元素宽度不确定而失效。

修改后的代码 #

HTML（移除多余的<br>标签）

<td>
  <div class="row">
    <div class="column1">
         <img id="slideShirt" class="IMGsize" src="https://..." alt="Hawaiian Shirt 1">
            <h3 class="shirt" id="shirtName">
               <center>Shirt 1</center> 
            </h3> 
     </div>

     <div class="column2">
        <img onclick="nextShirt()" class="arrow" src="https://..." alt="Up arrow">
        <img onclick="previousShirt()" class="arrow" src="https://..." alt="down arrow">
     </div>  
  </div> 
</td>

CSS（修复布局与尺寸问题）

/* 确保td和row有明确高度，让column2的100%高度生效 */
td {
  height: 400px; /* 可根据实际需求调整 */
}

.row {
  height: 100%;
}

.column1 {
    float: left;
    width: 60%;
    height: 100%; /* 改为100%，和row高度对齐 */
}

.column2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(100% - 60%); /* 占据column1之外的剩余空间 */
    height: 100%;
    gap: 20px; /* 控制两个箭头的垂直间距，替代br标签 */
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

img.arrow {
  height: 40px; /* 用固定像素或vw单位，尺寸更可控 */
  width: auto; /* 保持箭头比例 */
  cursor: pointer; /* 可选：添加鼠标悬停效果，提升交互体验 */
}

关键修改点说明 #

• 给td和row设置明确高度，确保column2的height:100%能正确继承高度。
• column2的宽度改为calc(100% - 60%)，确保它占据剩余空间，居中效果更明显。
• 移除<br>标签，改用flex的gap属性控制箭头间距，避免破坏flex布局。
• 箭头尺寸改用固定像素（或相对单位如vw），替代百分比，解决尺寸无法控制的问题。

内容的提问来源于stack exchange，提问作者TryingMyBest