CODEWITHSUNDEEP
htmlcssimagealignmentvertical-alignment
ProgrammerGirl
ProgrammerGirl

Reputation: 3223

How to display an image with the text before it and after it in the vertical middle of the image?

On one of my sites, I want to display a simple image gallery with a "PREVIOUS" and "NEXT" text link vertically center-aligned before and after each image (respectively) so that my users can easily navigate between images.

How can I do that? No matter what I try, I simply cannot get it to work.

Upvotes: 4

Views: 25770

Answers (4)

Andrei Volgin
Andrei Volgin

Reputation: 41089

What's wrong with the straightforward solution?

<div class="myGallery">
    ​<span>before</span>
    <img src="http://www.spiraluniverse.com/uploads/tx_templavoila/image1.jpg">
    <span>after</span>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

.myGallery img {
    vertical-align: middle;
}​

Here are the results: http://jsfiddle.net/6e87c/embedded/result/

Upvotes: 3

Oleg
Oleg

Reputation: 24998

Keep in mind that vertical-align property is inappliccable to block-level elements.

It would be acceptable to use absolute positioning relative to the gallery container in this scenario. After that is done use margins to adjust the position of the buttons, this would force the buttons to remain in place even if the container div gets stretched out vertically (e.g. to accomodate a taller image)

.gallery {/*our container element*/
  position:relative;
}
.btn-prev, .btn-next {
  width:40px;height:40px;/*we know the buttons will never change size dynamically*/
  margin:-20px 0;/*so we can use explicit px value to shift them as needed*/
  position:absolute;
  top:50%;
}
.btn-prev {/*remember to correctly position the buttons horizontally*/
  left:0;
}
.btn-next {
  right:0;
}

Fiddled

Upvotes: 0

David
David

Reputation: 2065

You can use something like on the next / prev links (if they have a class of say .next and .prev):

.gallery-container {
  position: relative;
}
.next { right: 0; }
.prev { left: 0; }
.next, .prev {
  position: absolute;
  top: 45%;
}

The elements .next and .prev are positioned absolutely to their parent (.gallery-container), and they are offset on their location by the top value (which is a % less than 50, if the element is 10% high, it would be top: 45%, if it's 20% in height, it's top: 40% etc).

You'll need to adjust some of the values slightly, such as the left and right properties to match more accurately to the width of the .next / .prev element. If .prev is 40pixels wide, then left: -40px; is what you'll need.

This solution is very customisable and supported in pretty much all browsers.

example HTML:

<div class="gallery-container">
  <a class="prev" href="#">Prev</a>
  <img src="..." />
  <a class="next" href="#">Next</a>
</div>

Upvotes: 0

bfavaretto
bfavaretto

Reputation: 71918

Here is a simple technique:

HTML

<div>
    ​<span>before</span>
    <img src="https://www.google.com/images/srpr/logo3w.png">
    <span>after</span>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

div span,
div img {
    display: inline-block;
    vertical-align: middle;
}​

http://jsfiddle.net/mGpz6/

This works because you can control the vertical-align value for inline-block elements. You can't do that for regular inline elements, they will always align to the (text) baseline, which is probably what you were experiencing on your website.

Upvotes: 4

Related Questions