0

Using bootstrap 4 inside Vue.js, I'd like to make left and right arrows to appear at the middle of the page around the image. Here is the code:

<div class="row">
    <div class="col-1">
        <span class="align-self-center"><h1>&#10094;</h1></span>
    </div>
    <div class="col-9">
        <h1>Modal comes here</h1>
        <img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
    </div>
    <div class="col-1">
        <span class="align-self-center"><h1>&#10095;</h1></span>
    </div>
</div>

But whatever I tamper with CSS, I can not acheive this. How can I fix this?

huxi
  • 33
  • 3
  • Adding `display: flex; align-items:center` to the parent will work. You can do it using CSS or Bootstrap classes. Do note that ***any*** vertically centered content, if it has unequal top and bottom margins or paddings, will appear not centered. So make sure that `

    ` has equal top and bottom margins and paddings. Last, but not least, `aling-self-center` has ***no effect*** if the parent doesn't have a flexbox value for `display` (`flex` or `inline-flex`).

     – tao Jan 03 '19 at 20:02

1 Answers1

0

Well, thanks to this answer, I realized it can be done with minimal fuss, by adding a simple flex css:

.img-box {
   display: flex;
   align-items:center;
}

And don't forget to add img-box class:

<div class="row img-box">
    <div class="col-1">
        <span class="nav-arrow">&#10094;</span>
    </div>
    <div class="col-9">
        <h1>Modal comes here</h1>
        <img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
    </div>
    <div class="col-1">
        <span class="nav-arrow">&#10095;</span>
    </div>
</div>
huxi
  • 33
  • 3