Html 在css中上下显示图像_Html_Css

Html 在css中上下显示图像

html css

Html 在css中上下显示图像,html,css,Html,Css,我想在一个单独的位置显示三个图像，所以我已经为它编写了css，以便在一行和块的中心显示图像，但问题是其中一个图像略微向上。如果我为它编写css，以便在同一高度显示，它将移动所有三个div。下面是代码 .member1{ 宽度：250px；高度：200px；显示：内联块；右边距：30px； } .member1+.member1{ 宽度：250px；高度：200px；显示：内联块；右边距：30px； } .成员2{ 宽度：250px；高度：200px；显示：内联块；右边距：30

我想在一个单独的位置显示三个图像，所以我已经为它编写了css，以便在一行和块的中心显示图像，但问题是其中一个图像略微向上。如果我为它编写css，以便在同一高度显示，它将移动所有三个div。下面是代码

.member1{
宽度：250px；
高度：200px；
显示：内联块；
右边距：30px；
}
.member1+.member1{
宽度：250px；
高度：200px；
显示：内联块；
右边距：30px；
}
.成员2{
宽度：250px；
高度：200px；
显示：内联块；
右边距：30px；
}
.会员详情{
宽度：100%；
文本对齐：居中；
}

我们看不到图像（链接断开），因此出现了问题。但是，如果您只想将图像显示成一行并居中显示，我建议您选中[CSS Flexbox]。（）

好的，使用引导，您将能够毫无问题地进行设计

因此，我编写了以下代码，这可能会帮助您查看。这是JSFIDLE的链接：


引导示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <div class="container-fluid">
  <div class="row">
    <div class="col-4"><img src="https://www.gstatic.com/images/branding/product/2x/photos_96dp.png"></div>
    <div class="col-4"><img src="https://www.gstatic.com/images/branding/product/2x/photos_96dp.png"></div>
    <div class="col-4"><img src="https://www.gstatic.com/images/branding/product/2x/photos_96dp.png"></div>
  </div>
</div>
</div>
</body>
</html>