css 如何将这些箭头向下移动到列的中心?

wsxa1bj1  于 2023-06-07  发布在  其他
关注(0)|答案(2)|浏览(212)

我正在尝试更改大小并将向上和向下箭头移动到各自列的中心。下面是问题的屏幕截图。Screenshot of website
下面是其中一个表列的HTML代码(所有5列的代码基本相同):

<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">
        <br>
        <img onclick="previousShirt()" class = "arrow" src="https://..." alt="down arrow">
     </div>  
  </div> 
</td>

衬衫的图像在“第1列”,上下箭头在“第2列”
下面是与箭头的列和图像一起使用的CSS代码:

.column1 {
    
    float: left;
    width: 60%;
    height:85%;
}

.column2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100%;  
}

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

img.arrow {
  height: 115%;
  width: 30%;
}

由于某些原因,我不能使用“arrow”类更改箭头的大小或位置。箭头在第2列,但第2列中的所有内容看起来会使图像居中,但实际上并非如此。欢迎任何和所有的帮助/想法。拜托,谢谢。

rryofs0p

rryofs0p1#

使用

.column1 .IMGsize {
display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
oxf4rvwz

oxf4rvwz2#

编辑:请也看看Grid Layout,它更适合于此。但是,如果你想继续使用一个表,我在这个答案中添加的例子会对你有所帮助。
看起来您没有充分利用表布局。这里有一个方法可以用最少的CSS来完成:

.row {
  display: flex;
  align-items: center;
}

.col {
  display: flex;
  flex-direction: column;
}
<table>
  <tr>
    <td>
      <div class="row">
        <div class="col">
          <img id="slideShirt" class="IMGsize" src="https://picsum.photos/200/300" alt="Hawaiian Shirt 1">
        </div>
        <div class="col">
          <img onclick="nextShirt()" class="arrow" src="https://..." alt="Up arrow">
          <br>
          <img onclick="previousShirt()" class="arrow" src="https://..." alt="down arrow">
        </div>
      </div>
      <h3 class="shirt" id="shirtName">
        <center>Shirt 1</center>
      </h3>
    </td>
    <td>
      <div class="row">
        <div class="col">
          <img id="slideShirt" class="IMGsize" src="https://picsum.photos/200/300" alt="Hawaiian Shirt 1">
        </div>
        <div class="col">
          <img onclick="nextShirt()" class="arrow" src="https://..." alt="Up arrow">
          <br>
          <img onclick="previousShirt()" class="arrow" src="https://..." alt="down arrow">
        </div>
      </div>
      <h3 class="shirt" id="shirtName">
        <center>Shirt 1</center>
      </h3>
    </td>
  </tr>
</table>

您可以看到箭头与图像的中心垂直对齐。

相关问题