Vertically align div inside div

Question

Im trying to align the two arrows here http://media.gaigo.org/work2.html#item-1 to align vertically to the centre of the image.

my html is:

<figure class="item">
    <a href="#item-18"><img class="arrow left" src="static/img/leftarrow.png"></a>
    <img src="static/img/WorkPicture.png">
    <a href="#item-2"><img class="arrow right" src="static/img/rightarrow.png"></a>
    <h2>Time Traveller #1 of 3</h2>
    <p class="artDetails artMedium">watercolour</p>
    <p class="artDetails artSize">20 x 30 inches</p>
</figure>

my css is:

.content .carousel .item .arrow {
    display: inline-block;
    vertical-align:middle;
}

There are quite a few tutorials on vertical centering on google — carloabelli, Jul 22 '15 at 10:27
`vertical-align` is only for inline elements, if you're not using flexbox, your best bet is using [translate](http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/) — marblewraith, Jul 22 '15 at 10:28

score 0 · Accepted Answer · edited Jul 22 '15 at 11:08

0

One way to do it is using position: absolute; with a relative parent. Try the following:

.content .carousel .item .arrow {
  display: inline-block;
  position: absolute;
  top: 50%;
  margin-top: -57px;
}

Note: You'll need to make adjustments to center the image.

EDIT:

I added a div around the arrows and image. This solution then works.

edited Jul 22 '15 at 11:08

Riley

4,122
3
16
30

answered Jul 22 '15 at 10:31

Paul Redmond

3,276
4
32
52

that almost works however by adding `position:relative` to the parent messes up the slider – Riley Jul 22 '15 at 10:36
1

Yes, you may need to reformat your code to get this to work well. Have a parent container that only contains the slider content (image) and the arrows. Take the pager outside it if possible. – Paul Redmond Jul 22 '15 at 10:54

score 0 · Answer 2 · answered Jul 22 '15 at 10:32

0

wrap up your arrows and img in a div, like this -

<div class="view">
    <a href="#item-18"><img class="arrow left" src="static/img/leftarrow.png"></a>
    <img src="static/img/WorkPicture.png">
    <a href="#item-2"><img class="arrow right" src="static/img/rightarrow.png"></a>
</div>

then add this css-

.view {
position: relative;
}

#item2, #item18 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#item2 {
right: 0;
}

answered Jul 22 '15 at 10:32

Rohit Kumar

2,048
1
14
28

Working, but please post only valid (!) HTML. Your IMG.Tags are never closed. Right would be something like – SophieXLove64 Jul 22 '15 at 10:38
I just copied the user's code, and I didn't noticed that thing.. and Riley is true But I myself like to close those tags.. :) – Rohit Kumar Jul 22 '15 at 10:40
"no need" doesn't mean its right to use bad HTML. Its not a question about "up to date". They just made it fool save since many fools was to silly to close their tags properly so it caused problems. With HTML5 its STILL bad programming. Having many of this "no need"-Elements on your page you can see, what "no need" exactly means. "No need" just means the Browser can handle YOUR error. This takes a very little time. So with many Elements your Site takes slightly longer to load, just for you was to lazy to write good HTML(5). – SophieXLove64 Jul 22 '15 at 10:45

score 0 · Answer 3 · answered Jul 22 '15 at 10:42

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {display: table; width:100%; height:400px; border:1px #000 solid;}

#child {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    border:1px #000 solid;
}

https://jsfiddle.net/pw63g1gv/

score 0 · Answer 4 · answered Jul 22 '15 at 11:11

The solution could be as simple as applying vertical-align: middle to the three images.

By default, your images are inline elements, so applying the following CSS rule might fix the problem.

Because you are using a slider (jQuery plugin?), there may be other CSS rules that may conflict, so you need to apply a selector that is specific enough.

Also, if there is any JavaScript/jQuery involved, the main image and the arrows may be absolutely positioned, and then, that could change things. The devil is in the details.

.item  img {
  vertical-align: middle;
}

<figure class="item">
    <a href="#item-18"><img class="arrow left" src="http://placehold.it/50x100"></a>
    <img src="http://placehold.it/400x300">
    <a href="#item-2"><img class="arrow right" src="http://placehold.it/50x100"></a>
    <h2>Time Traveller #1 of 3</h2>
    <p class="artDetails artMedium">watercolour</p>
    <p class="artDetails artSize">20 x 30 inches</p>
</figure>

Vertically align div inside div

4 Answers4