CODEWITHSUNDEEP
htmlcssimage
Andrew
Andrew

Reputation: 33

Aligning multiple images

I am a beginner in web coding, so I started making something like an exercise to see what I can do.

I have tried to align 5 images, and I have been searching anywhere on the web until now when I find out that all I found was very complicated for me now, due to limited knowledge.

#poze {align:"center"}
<div id="poze">
  <img src="rsz_1rsz_2000px-color_icon_greensvg.png" alt="green" style="padding:3px;border:3px solid black;" />
  <img src="rsz_rsz_2000px-color_icon_bluesvg.png" alt="blue" style="padding:3px;border:3px solid black;" />
  <img src="rsz_rsz_2000px-color_icon_yellowsvg.png" alt="yellow" style="padding:3px;border:3px solid black;" />
  <img src="rsz_1rsz_2000px-color_icon_redsvg.png" alt="red" style="padding:3px;border:3px solid black;" />
  <img src="rsz_1rsz_2000px-color_icon_purplesvg.png" alt="purple" style="padding:3px;border:3px solid black;" />
</div>

Anything I tried, even the complicated things, didn't work. Is there any possible way to do it only in HTML , without CSS? Or if CSS is needed, is there any simple method?

Upvotes: 3

Views: 144

Answers (4)

samubreizhizel
samubreizhizel

Reputation: 322

You can also simply use the CSS3 FlexBox module :

HTML:

<div id="poze">
  <img src="http://lorempixel.com/120/100/" alt="img1" />
  <img src="http://lorempixel.com/120/100" alt="img2" />
  <img src="http://lorempixel.com/120/100" alt="img3" />
  <img src="http://lorempixel.com/120/100" alt="img4" />
  <img src="http://lorempixel.com/120/100" alt="img5" />
</div>

CSS:

#poze{
    display:flex;
}

img{
    margin:2px;
}

See JSFiddle demo link : https://jsfiddle.net/smlrolland/zz1nyg7p/

Upvotes: 0

vahanpwns
vahanpwns

Reputation: 963

You're looking for vertical-align: middle;

#poze {
	text-align: center;
}
#poze img {
	padding: 3px;
	border: 3px solid black;
	vertical-align: middle;
}
<div id="poze">
	<img src="http://lorempixel.com/32/32" alt="green" />
	<img src="http://lorempixel.com/48/48" alt="blue" />
	<img src="http://lorempixel.com/32/16" alt="yellow" />
	<img src="http://lorempixel.com/16/64" alt="red" />
	<img src="http://lorempixel.com/32/32" alt="purple" />
</div>

This works because img elements are display: inline; by default.

See Mozilla's excellent CSS documentation for more info: https://developer.mozilla.org/en/docs/Web/CSS/vertical-align

Upvotes: 1

zer00ne
zer00ne

Reputation: 43880

Just use this CSS ruleset for centering horizontally and vertically #poze it never fails (well almost never):

#poze {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

SNIPPET

#poze {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div id="poze">

  <img src="http://placehold.it/25x75/000/fff?text=1" alt="green" style="padding:3px;border:3px solid black;" />

  <img src="http://placehold.it/25x75/00f/fc0?text=2" alt="blue" style="padding:3px;border:3px solid black;" />

  <img src="http://placehold.it/25x75/0e0/fa6?text=3" alt="yellow" style="padding:3px;border:3px solid black;" />

  <img src="http://placehold.it/25x75/0bb/0ff?text=4" alt="red" style="padding:3px;border:3px solid black;" />

  <img src="http://placehold.it/25x75/fff/000?text=5" alt="purple" style="padding:3px;border:3px solid black;" />
</div>

Upvotes: 0

dippas
dippas

Reputation: 60563

Don't use inline styles.

apply margin:auto to #poze and a fixed width (choose the value that fits you better)

#poze {
  width: 580px;
  margin: auto;
  border: 1px red dashed
}
img {
  padding: 3px;
  border: 3px solid black;
}
<div id="poze">
  <img src="//lorempixel.com/100/100" alt="green" />
  <img src="//lorempixel.com/100/100" alt="blue" />
  <img src="//lorempixel.com/100/100" alt="yellow" />
  <img src="//lorempixel.com/100/100" alt="red" />
  <img src="//lorempixel.com/100/100" alt="purple" />
</div>

Upvotes: 2

Related Questions