时间戳

首页 > 解决方案 > 如何将这些箭头垂直居中对齐？

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

问题描述

我有一个新兴的网站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);
}

标签： htmlcss

解决方案

您可以使用弹性盒：

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

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

.arrow-container {
    width: 20%;
}

推荐阅读