Align one image in center and one on right

Question

I'm trying to achieve something like this:

                           [CENTER IMAGE]             [RIGHT IMAGE]

Here's an image example of what I mean: http://prntscr.com/a9vuxv

I have applied the following code, but it puts both images on the right and my aim is to put one image in the center and one on the right:

<div style="width: 100%;">
  <div style="float: right;">
    <img src="centerimage.png" />
  </div>
  <div style="float: right;">
    <img src="rightimage.png" />
  </div>
</div>

So, do you want the center image to be centered relative to the full page width or relative to the space not taken up by the right image? Your text version seems to imply the first, but your linked image points to the latter. — Marcelo, Mar 01 '16 at 16:44
You can use flexbox. See boxes 62-76 here: http://stackoverflow.com/a/33856609/3597276 — Michael Benjamin, Mar 01 '16 at 17:41
Also: [**How to center-align a flex item and right-align another using Flexbox**](http://stackoverflow.com/a/33448054/3597276) — Michael Benjamin, Mar 01 '16 at 17:44

score 1 · Answer 1 · answered Mar 01 '16 at 16:36

You can use the trick with display: inline-block and text-align: center.

<div style="width: 100%; text-align: center; position: relative;">
  <div style="display: inline-block;">
    <img src="http://bit.ly/1UwB3sP" />
  </div>
  <div style="position: absolute; right: 0; top: 0">
    <img src="http://bit.ly/1UwB3sP" />
  </div>
</div>

score 1 · Answer 2 · answered Mar 01 '16 at 16:38

Any element in the flow will affect the margins or alignment of the center image/div. Therefore we need to remove the element from the document flow and use absolute positioning.

Then the center element can be centered per any usual method...here I remove all the floats, use inline-block / text align:center to center the middle image/div and position the right image/div absolutely.

.parent {
  text-align: center;
  position: relative;
}
.center {
  display: inline-block;
  background: red;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  background: pink;
}

<div class="parent">
  <div class="center">
    Some Image Centered
  </div>
  <div class="right">
    some image right
  </div>
</div>

Note: You could, of course, float/align the right div/image and position the center div/image absolutely....its a choice.

score 0 · Answer 3 · answered Mar 01 '16 at 17:01

Set the container div to text-align: center; and set the right element to absolute right.

.container{
  text-align: center;
}

.right{
  position: absolute;
  right: 0;
}

<div class="container">
  <img class="center" src="https://i.stack.imgur.com/e4z3K.jpg">
  <img class="right" src="https://i.stack.imgur.com/T5KPW.jpg">
</div>

score 0 · Answer 4 · answered Mar 01 '16 at 17:59

Here is the solution.

.right{
  float: right;
}
.center{
  overflow: hidden;
}
.center img{
  display: block;
  margin: 0 auto;
}

<div style="width: 100%;">
  <div  class="right">
<img src="http://lorempixel.com/150/150/nature/" />
  </div>
  
  <div  class="center">
<img src="http://lorempixel.com/150/150/nature/" />
  </div>
</div>

score -2 · Accepted Answer · edited Mar 01 '16 at 16:55

-2

.center{
  display: block;
  margin: auto;
  }

<div style="width: 100%;">
<div style="float: right;">
<img src="centerimage.png" width="100" height="100"/>
</div>
<img class="center" src="rightimage.png" width="100" height="100" />
</div>

Remove float:right in the center image and add the folowing rules:

margin: auto;
display: block;

edited Mar 01 '16 at 16:55

The Codesee

3,714
5
38
78

answered Mar 01 '16 at 16:34

silviagreen

1,679
1
18
39

2

The center image isnt actually centered...it's affected by the right div. – Paulie_D Mar 01 '16 at 16:36
2

its probably a better plan to pull the el out of flow, entirely, with absolute positioning, but if the imgs are the right size, a left float will work reasonably well. this answer should not be downvoted. – Bosworth99 Mar 01 '16 at 17:40

Align one image in center and one on right

5 Answers5