将CSS中的多个图像并排居中 [英] Centering multiple images in CSS side by side

问题描述

我是CSS和HTML的初学者，所以我确定这是一团糟.但是我想做的是将3个图像并排放置在CSS的水平中心.我尝试过使用不同的解决方案来使它们正确对齐，但是它们仍然停留在页面左侧，或者会堆叠在彼此的顶部(有时会重叠).

I'm a beginner at CSS and HTML so I'm sure this is a mess. But what I'm trying to do is center 3 images side by side in a horizontal center in CSS. I've tried different solutions have gotten them to align properly but they still stay stuck to the left of the page or will stack on top of each other (and sometimes overlap).

<div id="imagesMain">
    <img src="IMG_20140930_140020.jpg">
    <img src="IMG_20140922_164619.jpg">
    <img src="IMG_20140608_181811.jpg">
</div>

还有我的CSS:

#imagesMain{
    display: inline-block;
    position:relative;
    padding: 0;
    margin-left:auto;
    margin-right:auto;
    margin-top: 20px;
    text-align:center;
}
#imagesMain img{
    height: 400px;
    width: 300px;
    vertical-align: center;
}

默认情况下，图像很大.第二个CSS块调整了它们的大小，但是我无法让他们做更多的事情.有什么想法吗?

The images by default are huge. the 2nd CSS block resizes them but I can't get them to do much else. Any ideas?

推荐答案

您可以使用几乎相同的CSS，但只需进行一次简单的更正即可 change :

You can use the almost same CSS, but with one simple correction, change:

vertical-align: middle;

并删除这些:

display: inline-block;
position: relative;

这里没有center.它必须是middle.请更正.然后从<div>中删除display: inline-block.您的最终代码应类似于:

There's no center here. It must be middle. Please correct it. And remove display: inline-block from the <div>. Your final code should be like:

#imagesMain {
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  text-align: center;
}
#imagesMain img {
  height: 400px;
  width: 300px;
  vertical-align: middle;
}

<div id="imagesMain">
  <img src="IMG_20140930_140020.jpg">
  <img src="IMG_20140922_164619.jpg">
  <img src="IMG_20140608_181811.jpg">
</div>

点击运行代码段，然后按完整页面，检查这是否符合您的期望.

Click on Run Code Snippet and press Full Page to check if this is what you are expecting.

这篇关于将CSS中的多个图像并排居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！