Question

我是网络编码的初学者，所以我开始制作类似练习的内容，看看我能做些什么。

我试图对齐5张图片，我一直在网上搜索，直到现在我发现由于知识有限，我现在发现的所有内容都非常复杂。

＆＃13;

#poze {align:"center"}

＆＃13;

<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>

＆＃13;

我尝试过的任何东西，即使是复杂的东西，也没有用。有没有可能的方法只在HTML中，没有CSS？或者如果需要CSS，有没有简单的方法？

Answer 1

不要使用内联样式。

将margin:auto应用于#poze和固定width（选择最适合您的值）

＆＃13;

#poze {
  width: 580px;
  margin: auto;
  border: 1px red dashed
}
img {
  padding: 3px;
  border: 3px solid black;
}

＆＃13;

<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>

＆＃13;

Answer 2

您正在寻找vertical-align: middle;

＆＃13;

#poze {
	text-align: center;
}
#poze img {
	padding: 3px;
	border: 3px solid black;
	vertical-align: middle;
}

＆＃13;

<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>

＆＃13;

这是有效的，因为img元素默认为display: inline;。

有关详细信息，请参阅Mozilla优秀的CSS文档：http://kodeweave.sourceforge.net/editor/#e26996be20f992c047117d63848f4a47

Answer 3

只需使用此CSS ruleset水平和垂直居中#poze它永远不会失败（几乎从不）：

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

段

#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>

Answer 4

您也可以简单地使用CSS3 FlexBox模块：

<强> 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;
}

请参阅JSFiddle演示链接：https://jsfiddle.net/smlrolland/zz1nyg7p/

对齐多个图像

4 个答案:

段