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

wsxa1bj1 于 2023-06-07 发布在其他

关注(0)|答案(2)|浏览(213)

我正在尝试更改大小并将向上和向下箭头移动到各自列的中心。下面是问题的屏幕截图。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列中的所有内容看起来会使图像居中，但实际上并非如此。欢迎任何和所有的帮助/想法。拜托，谢谢。

css

来源：https://stackoverflow.com/questions/76369992/how-do-i-move-these-arrows-down-to-be-centered-in-the-column

2条答案

按热度按时间

rryofs0p1#

使用

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

赞(0）回复(0）举报 2023-06-07

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>

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

赞(0）回复(0）举报 2023-06-07

我来回答

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

2条答案

相关问题

热门标签

最新问答