如何将多个图像放在多个背景的中心

Question

如何在背景上垂直和水平居中拍摄图像？

我有这段代码：

＆＃13;

＆＃13;

.lineargradientgreen {
  background-image: linear-gradient(green, white);
  border-width: 2pt 2pt 2pt 2pt;
  height: 500px;
  width: 500px;
  float: left;
  text-align: center;
}

.lineargradientblue {
  background-image: linear-gradient(to top left, white, blue);
  border-width: 2pt 2pt 2pt 2pt;
  height: 500px;
  width: 500px;
  float: left;
  text-align: center;
}

＆＃13;

<div class="lineargradientgreen">
  <img src="https://www.listefit.com/wp-content/uploads/2017/12/tiny-png-google-g%C3%B6rsel-optimizasyonu.jpg" alt="Hot Air Balloon" width="200px" height="200px" />
</div>

<div class="lineargradientblue">
  <img src="https://www.samcodes.co.uk/project/geometrize-haxe-web/assets/images/xseagull.jpg.pagespeed.ic.iK66EGA15-.jpg" alt="Hot Air Balloon" width="200px" height="200px" />
</div>

＆＃13;

＆＃13;

＆＃13;

最后，我只在两个背景上水平居中拍摄图像，我怎样才能垂直居中？

Answer 1

使用Flexbox

  

对于水平中心 - ＆gt;父母的justify-content:center

     

对于垂直中心 - ＆gt;关于孩子的align-self:center

.lineargradientgreen {
  display: flex;
  justify-content: center;
  background-image: linear-gradient(green, white);
  border-width: 2pt 2pt 2pt 2pt;
  height: 500px;
  width: 500px;
  float: left;
  text-align: center;
}

.lineargradientblue {
  display: flex;
  justify-content: center;
  background-image: linear-gradient(to top left, white, blue);
  border-width: 2pt 2pt 2pt 2pt;
  height: 500px;
  width: 500px;
  float: left;
  text-align: center;
}

div img {
  width: 300px;
  align-self: center;
}

<div class="lineargradientgreen">
  <img src="https://www.samcodes.co.uk/project/geometrize-haxe-web/assets/images/xseagull.jpg.pagespeed.ic.iK66EGA15-.jpg" alt="Hot Air Balloon" />
</div>

<div class="lineargradientblue">
  <img src="https://www.listefit.com/wp-content/uploads/2017/12/tiny-png-google-g%C3%B6rsel-optimizasyonu.jpg" alt="Hot Air Balloon" />
</div>

支持Flexbox的浏览器：在Google上搜索时

Answer 2

这很简单，只需更换：

text-align: center;

使用：

box-sizing: border-box;
padding: 150px;

给它一个填充，它是框500px的大小与图像200px的大小之差的一半：

  

500 - 200 = 300/2 = 150。

＆＃13;

＆＃13;

.lineargradientgreen {
  background-image: linear-gradient(green, white);
  border-width: 2pt 2pt 2pt 2pt;
  height: 500px;
  width: 500px;
  float: left;
  box-sizing: border-box;
  padding: 150px;
}

.lineargradientblue {
  background-image: linear-gradient(to top left, white, blue);
  border-width: 2pt 2pt 2pt 2pt;
  height: 500px;
  width: 500px;
  float: left;
  box-sizing: border-box;
  padding: 150px;
}

＆＃13;

<div class="lineargradientgreen">
  <img src="https://placehold.it/200x200" alt="Hot Air Balloon" />
</div>

<div class="lineargradientblue">
  <img src="https://placehold.it/200x200" alt="Hot Air Balloon" />
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

有几种方法可以做到这一点，比如使用它，flexbox，显示，位置等。centering css complete guide

例如使用位置:( 支持所有旧浏览器，例如 IE ：D）

.lineargradientgreen {
  background-image: linear-gradient(green, white);
  border-width: 2pt 2pt 2pt 2pt;
  height: 500px;
  width: 500px;
  float: left;
  text-align: center;
}

.lineargradientblue {
  background-image: linear-gradient(to top left, white, blue);
  border-width: 2pt 2pt 2pt 2pt;
  height: 500px;
  width: 500px;
  float: left;
  text-align: center;
}

.myclass{
	position: relative;
}
.myclass > img{
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

<div class="myclass lineargradientgreen">
  <img src="https://www.listefit.com/wp-content/uploads/2017/12/tiny-png-google-g%C3%B6rsel-optimizasyonu.jpg" alt="Hot Air Balloon" width="200px" height="200px" />
</div>

<div class="myclass lineargradientblue">
  <img src="https://www.samcodes.co.uk/project/geometrize-haxe-web/assets/images/xseagull.jpg.pagespeed.ic.iK66EGA15-.jpg" alt="Hot Air Balloon" width="200px" height="200px" />
</div>