CODEWITHSUNDEEP
htmlcssimagealignmentvertical-alignment
EgbertJan
EgbertJan

Reputation: 25

Vertically align 3 images

I have 3 images that I want to align vertically however I can't seem to get it working properly. My images are split into 3 parts from 1 existing image. You can see slight transitions from one image to the other. What am I missing here?

HTML:

    <div id="Wrapper" class="Wrapper">
        <div id ="image-1">
            <img id="top" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/top.png" class="jscolor border="0">
        </div>
        <div id ="image-2">
            <img id="mid" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/mid.png" class="jscolor border="0">
        </div>
        <div id ="image-3">
            <img id="bot" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/bot.png" class="jscolor border="0">
        </div>
    </div>

JS Fiddle: https://jsfiddle.net/krvrp7eb/

Upvotes: 1

Views: 3834

Answers (4)

IamOmkar92
IamOmkar92

Reputation: 1

use position: relative; and use top, bottom left, and right to adjust its position.

Upvotes: 0

kukkuz
kukkuz

Reputation: 42352

Why this happens?

img is an inline element and inline elements flows like text. The small whitespace is due to this. Possible solutions:

  1. Change the display from inline to other - add display: block for instance

  2. Change the vertical-align property to top (default is baseline)

  3. Shrink the text size to 0 by font-size: 0 on the containing block of the inline element.

Example

Add vertical-align: top to all the three images - see updated fiddle here and snippet below:

#image-1 img,
#image-2 img,
#image-3 img {
  background-color: #00f;
  vertical-align: top;
}
.image-1,
.image-2,
image-3 {
  display: block;
}
.Wrapper {
  vertical-align: middle;
  display: block;
}
<div id="Wrapper" class="Wrapper">
  <div id="image-1">
    <img id="top" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/top.png" class="jscolor" border="0">
  </div>
  <div id="image-2">
    <img id="mid" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/mid.png " class="jscolor" border="0">
  </div>
  <div id="image-3">
    <img id="bot " src="http://www.crystalcave.nl/wp-content/themes/shop-isle/bot.png " class="jscolor" border="0">
  </div>
</div>

Upvotes: 2

Darshit
Darshit

Reputation: 11

just add one css property in this

image-1 img, #image-2 img, #image-3 img

to

float: left;

Upvotes: 1

sol
sol

Reputation: 22939

Add the following to your CSS:

.Wrapper {
    font-size:0;
}

JSFIDDLE

Upvotes: 1

Related Questions