Question

我有一个新兴的网站http://rushycreekfarm.com.au/，其中心图像的两侧各有两个箭头以更改幻灯片。但是，我不确定如何将箭头垂直居中对齐。箭头有一个容器（红色），整个幻灯片显示有一个容器（蓝色）。我希望箭头位于蓝色容器的一半上方。

<!DOCTYPE html>
<html>
<head>
  <title>Rushy Creek Farm</title>
  <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
  <div id="details" class="header">765 Brockman Highway | 0438695434 | 
tracyrob@wallworks.com.au
  </div>
  <div class="title">
    <h1>RUSHY CREEK FARM</h1>
  </div>
  <div class="nav-bar">
    <a href="./index.html">HOME</a>
    <a href="./index.html">ABOUT</a>
    <a href="https://www.stayz.com.au/accommodation/wa/south- 
   west/augusta/9189326">BOOK</a>
    <a href="#details">CONTACT</a>
  </div>
  <div class="slideshow">
    <div class="arrow-container">
      <img id="arrow-left" class="arrow" src="./arrow-left.jpg">
    </div>
    <img id="main-image" src="./images/droneshot.jpg">
    <div class="arrow-container">
      <img id="arrow-right" class="arrow" src="./arrow-right.jpg">
   </div>
  </div>
  <script src="script.js" type="text/javascript"></script>
</body>
<html>

这是CSS：

.header {
  font-family: garamond;
  text-align: center;
  height: 10px;
  border-bottom: 1px solid rgb(220,220,220);
  padding-bottom: 12px;
}

.title {
  text-align: center;
  letter-spacing: 2px;
}

body {
  font-family: Georgia;
}

.nav-bar {
  background-color: skyblue;
}

.nav-bar a {
  cursor: pointer;
  display: inline-block;
  background-color: skyblue;
  color: white;
  text-decoration: none;
  font-size: 25px;
  padding: 16px 40px;
  border-radius: 3px;
  transition: 0.3s;
  letter-spacing: 2px;
}

.nav-bar a:hover {
  background-color: rgb(57,97,140);
}

.slideshow {
  background-color: blue;
  text-align: center;*/
}

#main-image {
  display:inline-block;
  width: 60%;
}

.arrow {
  cursor: pointer;
  display: inline-block;
  background-color: gray;
 transition: 0.3s;
}

#arrow-left {
  float: right;
}

#arrow-right {
  float: left;
}

.arrow-container {
  background-color: red;
  display: inline-block;
  width: 19%;
}

.arrow:hover {
  background-color: rgb(220,220,220);
}

Answer 1

您可以使用flexbox：

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

由于flexbox删除了display: inline-block添加的元素之间的空间，因此您现在可以将width: 20%用于箭头容器：

.arrow-container {
    width: 20%;
}

Answer 2

您可以使用绝对定位和平移变换。

.slideshow {
    background-color: blue;
    position: relative;             // new
    text-align: center;
}

.arrow-container {
    background-color: red;
    display: inline-block;
    position: absolute;             // new
    top: 50%;                       // new
    transform: translateY(-50%);    // new
    width: 19%;
}

.arrow-container.left {
    left: 0;                        // new
}

.arrow-container.right {
    right: 0;                       // new
}

Answer 3

您可以使用绝对定位来垂直放置箭头：

.arrow-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

如何将这些箭头垂直居中对齐？

3 个答案: