What is the best way to align navigation arrows vertically?

I am working on a modal album that displays images of various sizes. My issue is with styling the navigation arrows to appear in the center of the page, regardless of the image size. I have included my code below:

<div class="row img-box">
    <div class="col-1">
        <span @click="nextImg(-1)"  class="nav-arrow">&#10094;</span>
    </div>
    <div class="col-9">
        <h1>Modal content goes here</h1>
        <img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
    </div>
    <div class="col-1">
        <span @click="nextImg(1)" class="nav-arrow">&#10095;</span>
    </div>
</div>

Below is the relevant CSS:

.modal-img {
  max-height: 1080px;
}

.img-box {
   display: flex;
   align-items:center;
}
.nav-arrow {
  font-size: 3em;
  position: absolute;
  top: 50%;
}

Despite my efforts, I have been unable to achieve the desired effect through CSS adjustments. Therefore, I am seeking help with this issue.

htmlcssbootstrap-4

Answer №1

Implement the use of position fixed

.modal-img {
  max-height: 1080px;
}

.img-box {
   display: flex;
   align-items:center;
   justify-content: center;
}
.nav-arrow {
  font-size: 3em;
  position: fixed;
   top: 120px;  
}
.nav-left {   
  left: 10px; 
}
.nav-right { 
    right: 10px;   
}
<div class="row img-box">
    <div class="col-1">
        <span @click="nextImg(-1)"  class="nav-arrow nav-left">&#10094;</span>
    </div>
    <div class="col-9">
        <h1>Content will be displayed in modal</h1>
        <img class="img-fluid modal-img" src="https://via.placeholder.com/500C/O https://placeholder.com/">
    </div>
    <div class="col-1">
        <span @click="nextImg(1)" class="nav-arrow nav-right">&#10095;</span>
    </div>
</div>

Answer №2

To center the arrows, apply the CSS code transform: translateY(-50%) on the arrow container.

.nav-arrow {
  font-size: 3em;
  position: absolute;
  top: 50%;
   transform: translateY(-50%)
}

Alternatively, you can remove position: absolute; top: 50%;

Answer №3

Are you satisfied with this solution? I have included the bootstrap class align-items-center and added padding to the spans

.modal-img {
  max-height: 1080px;
}


.nav-arrow {
  font-size: 3em;
  position: relative;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

        
<div class="row img-box align-items-center">
    <div class="col-1 ">
        <span @click="nextImg(-1)"  class="nav-arrow pt-5 d-inline-block">&#10094;</span>
    </div>
    <div class="col-9 text-center">
    <h1>Modal content goes here</h1>
        <img class="img-fluid modal-img" src="https://via.placeholder.com/100/O https://placeholder.com/">
    </div>
    <div class="col-1">
        <span @click="nextImg(1)" class="nav-arrow pt-5 d-inline-block">&#10095;</span>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a string of DIV elements with PHP and mySQL - is it possible?

I am in the process of creating a well-formatted product list using data from an SQL database. The goal is to have my website display a store layout with small boxes containing brief information about each product that, when clicked, will open up detailed ...

phpmysqlsqlhtmldivider

Using Jquery to store input values from within <td> elements in an array

I'm trying to capture user input from a dynamically changing table with 2 columns. How can I retrieve the data from each column separately? The size of the table is adjusted by a slider that controls the number of rows. Below is the structure of my ta ...

javascriptjqueryhtmlfirebase-realtime-databasecss-selectors

Error: The specified element to insert before is not a direct descendant of this parent node

As I work on converting a jquery dragable script to plain javascript, I encountered an issue at the insertBefore point. The error message that pops up is: NotFoundError: Node.insertBefore: Child to insert before is not a child of this node. This particula ...

javascripthtml

Hide the menu when a user taps on an item on mobile or tablet devices

I'm facing a unique challenge and could use some guidance. The issue is with the mobile version of my website, accessible at . On tablets or mobile devices, the menu is condensed into a button. To navigate through the menu, I have to click the button ...

javascripthtmlcssmobile

Steps for smoothly transitioning an element into a row and animating its neighboring elements to adjust their width using VueJS

Is there a way to smoothly slide-in an element in a row and have the other elements adjust their widths accordingly while maintaining their relative sizes? <div style="width: 100%; display: flex"> <div id="firstColumn" ...

cssvue.jscss-animationscss-transitions

Modifying Label text dynamically using jQuery on Click event

My website HTML contains the following code snippet: <script src="js/jquery.flexslider.js"></script> <script src="js/jquery.rings.js"></script> The contents of jquery.rings.js are as follows: $('input[type="image"]') ...

javascriptphpjqueryhtml

Is there a way for a DOMWindow popup to automatically resize to fit its

Currently exploring JQuery and learning on the fly, I'm wondering if there's a method to automatically adjust the size of a DOM window based on its content? I've successfully modified the parameters to accept % width and height instead of p ...

javascriptjqueryhtmlbrowserpopup

particular shade for button border and background

I'm looking to create a button using Material UI that has a specific design. Right now, I've only been able to achieve this: https://i.stack.imgur.com/xvv7s.png Here is the code I am currently using. If anyone can help me identify what I'm ...

cssmaterial-ui

What's the issue with my jQuery AJAX script?

I am experiencing an issue with my ajax pages using jQuery to retrieve content. Only one page seems to be working properly, even though I have multiple pages set up. How can I resolve this problem? $(document).ready(function() { $('.lazy_content& ...

javascriptjqueryhtmlajax

Resizing the elements within an iframe: Troubleshooting problems with embedding Bandcamp players

My goal is to embed a Bandcamp music player on my WordPress blog page, but I'm facing a challenge. The maximum width of the current player is 700px and I need it to be 900px. After consulting with someone at Bandcamp, they directed me to the old versi ...

htmlcssjsoniframe

Troubleshooting Boostrap Check Box Styling Problem in MVC 5

My registration form has a problem with the checkbox's alignment. I want the text to appear to the left of the checkbox, in line with the placeholders for the input fields on the page. Currently, the text is either above the checkbox (centered in its ...

csshtmlasp.net-mvc-5

What is the best way to include a class with Knockout JS?

After going through the basic Knockout tutorial and examining various examples, I decided to try it out myself on jsFiddle. However, I encountered some issues as my attempts did not quite work. The goal is simple - I just want to add the class open to a d ...

javascripthtmlknockout.js

The search box and submit button display without any visible borders

Question: I am facing an issue with the appearance of the searchbox and submit button in my PHP project. They look different compared to a simple HTML form. How can I fix this? The code on the PHP subpage is as follows: <header id="header"> <div ...

htmlcss

How to make the parent div adjust its height to fit the children [CSS]

I am facing an issue with my parent div's height when adding more children. Despite setting the height of the parent to auto or not specifying a height at all, it ends up with a random height that does not seem to match the sum of its children. Even i ...

htmlcss

Guide to getting Material-UI Dialog up and running smoothly in your React application

I'm currently working on a project using material-UI, and I'm having trouble with the Dialog component not working properly. Despite trying various solutions, I haven't been able to get it to function correctly in my React application with m ...

javascripthtmlreactjsreact-reduxmaterial-ui

Ajax activates a slider

One element I have is a menu div, along with a content div Initially, when the slider (which is a jquery plugin) is placed in the index.php, everything appears to be working well, as shown in the image below However, my objective is to have each page&apo ...

jqueryhtmlajaxslider

Create a footer with a centered column orientation

I am currently working on creating a footer with four columns, one of which will display an image while the others will contain useful hyperlinks. This is what I have accomplished so far: http://jsfiddle.net/Lqh5a/ HTML <div id="wrapper"> <div ...

htmlcssimagefooter

To enhance user experience, it is recommended to reload the page once

Hello, I'm looking for a way to automatically refresh the page after submitting an AJAX form. Currently, I have an onClick function that seems to refresh the page, but I still need to press F5 to see the changes I've made. Here's the JavaSc ...

phpjavascriptjqueryhtml

Tips for customizing the appearance of material-ui SelectField

Currently, I am utilizing material-ui alongside react with the version "material-ui": "^0.19.2". I am facing an issue while attempting to embed a SelectField inside a table. Although the functionality is working smoothly, there are two unexpected behaviors ...

cssreactjsmaterial-ui

If the content within a <div> element exceeds the available width, a horizontal scrollbar will be displayed

I have a scenario where I am using an absolute div to overlap another div. The div that overlaps is the absolute one (.content), and if the overlapped div (.left) doesn't fit the screen width, a horizontal scroll bar does not appear. How can I automat ...

htmlcss