Question

我正在使用最新的bootstrap 4并创建了一个400px的div来保存高度范围从100px到350px的图像。我试图水平和垂直居中图像，并设法使用以下代码水平居中图像。

~]$ hadoop fs -D dfs.replication=2 -put -f /home/cloudera/cricketers /user/cloudera/Dec_17_2017/Dec_18

我添加什么类才能让图像垂直居中于div？

Answer 1

在conatiner上使用d-flex，您可以在图像上使用my-auto以y轴为中心。

Fiddle

<div class="d-flex" style="height: 400px; border: 2px orange solid;"> 
  <img style="height: 300px; width: 300px;" src="https://images.pexels.com/photos/789141/pexels-photo-789141.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" class="mx-auto my-auto d-block" alt="Turtle pic">
  <img style="height: 200px; width: 200px;" src="https://images.pexels.com/photos/789141/pexels-photo-789141.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" class="mx-auto my-auto d-block" alt="Turtle pic">
</div>

如何在boostrap 4中垂直和水平居中图像？

1 个答案: