LebGeeks

ramiraz

Member

Align image horizontally inside small div

Suppose I insert images inside a div container that is smaller than the images. If the overflow is visible the images will align vertically. How can I align them horizontally?

Kassem

Member

Re: Align image horizontally inside small div

why does the container have to be smaller than the images?

ramiraz

Member

Re: Align image horizontally inside small div

Because I need to create a hover effect with jquery but first I need them to align horizontally.

Kassem

Member

Re: Align image horizontally inside small div

When you say align horizontally, does that mean "center" them horizontally?

ramiraz

Member

Re: Align image horizontally inside small div

Try this: create a div that's 400px wide. Put in it three 300px wide images with float:left properties. You will notice that the images will overflow and line up vertically on top of each other. I just want them to align horizontally next to each other (to the right).

Last edited by ramiraz (September 28 2010)

Kassem

Member

Re: Align image horizontally inside small div

Ok try this:

<div id="container">
<img class="inlineImages" ....  />
<img class="inlineImages" ....  />
<img class="inlineImages" ....  />
</div>

// in your CSS:
.inlineImages { display: inline-block }

if that did not work put then images inside a list and apply the same trick.

Good luck!

Last edited by Kassem (September 28 2010)

rolf

Member

Re: Align image horizontally inside small div

Try this: create a div that's 400px wide. Put in it three 300px wide images with float:left properties. You will notice that the images will overflow and line up vertically on top of each other. I just want them to align horizontally next to each other (to the right).

Of course they will. Try setting the width of the div using "min-width:400px" This way it doesn't shrink less then 400px but expands when needed. In theory, at least.

Otherwise, if you want the images to be stacked regardless of the width of the div, then you need to make a new layer which is independent from the width of that famous div, and have it placed in front of all the rest.
For that you will need to set a parent div as position:relative, then a child div for the images with position:absolute and alight it using the left and top CSS attributes, and bring it to front using z-index, so that it will be aligned with your div on the left, but the images will be stacked independently of the width of the div.

Last edited by rolf (September 28 2010)

XhacK

Member

Re: Align image horizontally inside small div

Because I need to create a hover effect with jquery but first I need them to align horizontally.

I still don't get why the div should be smaller, can you provide us with a test page to check the effect you are talking about.

ramiraz

Member

Re: Align image horizontally inside small div

SOLVED: you just put the images in a wide enough div which is also put inside a smaller one. You can check the desired effect here: http://ramirizk.com/asme

Last edited by ramiraz (September 29 2010)