我正在尝试更改大小并将向上和向下箭头移动到各自列的中心。下面是问题的屏幕截图。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列中的所有内容看起来会使图像居中,但实际上并非如此。欢迎任何和所有的帮助/想法。拜托,谢谢。
2条答案
按热度按时间rryofs0p1#
使用
oxf4rvwz2#
编辑:请也看看Grid Layout,它更适合于此。但是,如果你想继续使用一个表,我在这个答案中添加的例子会对你有所帮助。
看起来您没有充分利用表布局。这里有一个方法可以用最少的CSS来完成:
您可以看到箭头与图像的中心垂直对齐。