CODEWITHSUNDEEP
htmlcssimagecss-float
kumoyadori
kumoyadori

Reputation: 397

CSS: How to float:right and center

I want to horizontally display several images. They should be aligned from right to left. i.e. if I add one more picture under the list of picures, it's put left to the last. Line breaks are done automatically depending on browser width. Like:

3 2 1 
  5 4

and when getting smaller browser width

2 1 
4 3
  5

and when adding a 6th image

3 2 1 
6 5 4

etc.

This so far is the effekt of float:right.

Now, if say the image has 500px width, and the left space on the left side from the last picture is just 300, there will be a line break. That is just fine, but it leaves this 300px empty space, while there is lesser margin on the right side. I want these to be the same. Also, at the last line, when there may not be enough images to fill out the line, they should be centered. Somehow like this:

3 2 1 
 5 4

Basically I want the same effect of when I put reference all images with a class, that has float:right in its definitionm but centered. I tried warpping all images into a div block and have that container block centered with text-align:center, but appearantly that's something, that's not working with float.

It's downright easy to have things centered, but from left to right (all I need is the container div), but is there also a way with the images floating from right to left?

Upvotes: 2

Views: 23011

Answers (2)

Anton Boritskiy
Anton Boritskiy

Reputation: 1569

How about this one http://jsfiddle.net/A6zLX/ The idea is to switch contents to inline-blocks and use right-to-left text align. Here is HTML

<div class="container">
    <div class="wide">1</div>
    <div class="wide">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

and CSS

.container {
    width: 600px;
    height: auto;
    border: 1px solid red;
    text-align: center;
    direction: rtl;
}
.container div {
    display: inline-block;
    width: 25%;
    height: 20px;
    border: 2px solid blue;
}
.container div.wide {
    width: 35%;
}

UPDATE: you can remove fixed width from container - it will still work, but become fluid.

P.S.: sorry, Mabedan was faster to present this idea.

Upvotes: 2

Mabedan
Mabedan

Reputation: 907

give this style to the container of the images:

text-align: center;
direction: rtl;

http://jsfiddle.net/3Jxt9/

Upvotes: 4

Related Questions