How to align image in horizontal centre of div & set image next to it?

Question

I want to set an image centre of div & just next it want to set a new image in the same line. I don't want to set it in next line.

I have tried below code it set first image in centre but not other image next to it. It put image in next line.

div {
  margin: 0 auto;
  overflow: auto;
  background: #0cf;
}

<div>
  <img src="../images/catchBug.png" alt="img1">
  <img src="../images/signature.png" alt="img2">
</div>

Well i don't understand why someone down voted it. I am learning web designing & asked a question about one problem.This is enough — TechChain, Mar 10 '18 at 16:37

score 1 · Accepted Answer · answered Mar 10 '18 at 16:37

1

The easiest way is to give the parent div text-align: center and position: absolute to the bottom img:

div {
  /*position: relative; optional, depends on the image/divs size*/
  margin: 0 auto;
  overflow: auto;
  background: #0cf;
  text-align: center;
}

.abs {
  position: absolute; /*taken out of the normal document flow; will overflow the parent div since its position is commented out, uncomment if you don't want that*/
}

/* addition */

img {vertical-align: bottom} /*removes bottom margin/whitespace*/

<div>
  <img src="http://placehold.it/100x100" alt="img1">
  <img src="http://placehold.it/125x125" alt="img2" class="abs">
</div>

answered Mar 10 '18 at 16:37

VXp

11,598
6
31
46

I have one question how did it wok? – TechChain Mar 10 '18 at 16:45
The trick lies in the `text-align: center` which also effects the absolutely positioned img, since the centered spot is already taken by another image, it's then positioned right next to it even though it's taken out of the normal document flow. – VXp Mar 10 '18 at 16:50
I am always confused between aliginig and postioning elements. like float,postion,display & the combination of all is more confusing.What is best resource to learn only these concepts – TechChain Mar 10 '18 at 17:14
Of course you can find a lot of material for each topic online, e.g. w3schools is pretty popular among beginners, you can also learn a lot on/from youtube, but yea, having a good understanding of these concepts won't hurt. At the end you should know what, when and where to use something to get to the desired result effectively, cleanly and with as little styling as possible. – VXp Mar 10 '18 at 17:25
Forgot to mention [mdn](https://developer.mozilla.org/en-US/docs/Web/CSS), pretty good resource. – VXp Mar 10 '18 at 18:04

score 0 · Answer 2 · answered Mar 10 '18 at 14:32

As long as you don't want flexbox:

If you've got only two pictures in that row and there won't be more you can always hardcode values of width and margin like this (but remember not to use HTML tags in CSS, it's a bad practice):

img{
  display: inline-block;
  width: __WIDTH_THAT_IS_WIDE_ENOUGH__;
  margin: 0  __WIDTH_THAT_FITS__;
}

score 0 · Answer 3 · answered Mar 10 '18 at 15:44

I hope I got your question needs well. Try this

.main {
  /*Introduce a fixed width so that your margin: 0 auto; can be put to work. This will center the div*/
  width: 500px;
  margin: 0 auto; 
  overflow: auto; 
  background-color: #0CF;
}

.main img {
  /*Restrict to inline-block for images 
  because https://stackoverflow.com/questions/2402761/is-img-element-block-level-or-inline-level*/
  display: inline-block;
  /*Define a width for the images to keep them in the container 500px*/
  width: 48%;
}

<div class="main">
  <img src='https://images.unsplash.com/45/ZLSw0SXxThSrkXRIiCdT_DSC_0345.jpg?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=2e1f776c8e5286b86dca14edbd302243' alt='' />
  <img src='https://images.unsplash.com/photo-1511290156538-08919a92771d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e4b4923f61050049c740fde4e35dd168' />
</div>

How to align image in horizontal centre of div & set image next to it?

3 Answers3