CODEWITHSUNDEEP
htmlcss
Andy58
Andy58

Reputation: 27

how do i move all images to the right in css

I'm currently running the following code:

HTML

<div style="img"/>
 <img src="spiderman.png" alt=""/>
 <img src="superman.png" alt="" height="25%" width="25%"/>
 <img src="batman.png" alt="" />
</div>

CSS

 div{
    text-align: right;
}

div img {
    display: list-item;
    width: 100px;
    height: 100px;
}

div:after {
    content: '';
    display: inline-block;
    width: 100
}

I cant seem to get the images to remain in a vertical line and move to the right of the screen, any suggestions would be helpful

Upvotes: 0

Views: 518

Answers (2)

Obsidian Age
Obsidian Age

Reputation: 42304

You don't need to worry about aligning items to the right with text-align, changing their display, or using :after at all. Simply float the images to the right, and clear them as well :)

div img {
  float: right;
  clear: both;
  width: 100px;
  height: 100px;
}
<div>
  <img src="http://placehold.it/100" alt="" />
  <img src="http://placehold.it/100" alt="" />
  <img src="http://placehold.it/100" alt="" />
</div>

Hope this helps! :)

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53664

display: flex; flex-direction: column; align-items: flex-end; on the parent will put them in a column aligned to the right.

.img {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.img img {
  width: 100px;
  height: 100px;
}
<div class="img">
  <img src="spiderman.png" alt="">
  <img src="superman.png" alt="" height="25%" width="25%">
  <img src="batman.png" alt="">
</div>

You could also float them right, then clear: right so they're in a column.

.img {
  overflow: auto;
}

.img img {
  width: 100px;
  height: 100px;
  float: right;
  clear: right;
}
<div class="img">
  <img src="spiderman.png" alt="" />
  <img src="superman.png" alt="" height="25%" width="25%" />
  <img src="batman.png" alt="" />
</div>

Upvotes: 1

Related Questions