我想垂直居中两个箭头。一个在左边,另一个在右边。最终目标是尝试制作HTML和JavaScript内容的滑块作为学习工具。我似乎无法让箭头垂直居中。以下是我正在使用的代码。我试过垂直对齐和顶部:50%,但似乎没有工作。谢谢。如何垂直居中HTML元素
#wrapper {
width: 800px;
height: 400px;
background-color: black;
}
#slide1 {
width: 700px;
height: 350px;
background-color: green;
}
#slide2 {
width: 700px;
height: 350px;
background-color: green;
}
#slide3 {
width: 700px;
height: 350px;
background-color: green;
}
#slide4 {
width: 700px;
height: 350px;
background-color: green;
}
#slide5 {
width: 700px;
height: 350px;
background-color: green;
}
#right-button {
color: white;
float: right;
padding-right: 2px;
font-size: 5em;
}
#left-button {
color: white;
float: left;
padding-left: 2px;
font-size: 5em;
}
<h3>Presentation Slider</h3>
<div id="wrapper">
<div id="left-button"><strong><</strong>
</div>
<!--
\t <div id="slide1"></div>
\t <div id="slide2"></div>
\t <div id="slide3"></div>
\t <div id="slide4"></div>
\t <div id="slide5"></div>
\t -->
<div id="right-button"><strong>></strong>
</div>
</div>
你知道'class'es?而不是添加相同的CSS到每个ID,你可以使用'class'。或者,您可以合并具有相同CSS的所有选择器。 – putvande