CODEWITHSUNDEEP
htmlcss
cornelius
cornelius

Reputation: 247

how can I align these arrows vertically center?

I have a bourgeoning website http://rushycreekfarm.com.au/ with a central image that has two arrows either side to change slides. However, I'm not sure how to align the arrows vertically centre. The arrows have a container (in red) and the entire slideshow has a container (in blue). I would like the arrows to be half way up the blue container.

<!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 | 
[email protected]
  </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>

And here is the 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);
}

Upvotes: 0

Views: 2138

Answers (3)

Maytha8
Maytha8

Reputation: 866

You can use absolute positioning to position the arrows vertically:

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

Upvotes: 1

fubar
fubar

Reputation: 17388

You can use absolute positioning and a translation transform.

.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
}

Upvotes: 1

Angel Politis
Angel Politis

Reputation: 11313

You can use flexbox:

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

Since flexbox removes the space between the elements that display: inline-block adds, you can now use width: 20% for the arrow containers:

.arrow-container {
    width: 20%;
}

Upvotes: 1

Related Questions