对齐图像的正确 CSS 是多少？

Question

我目前正在设计一个网站，其中一个部分包含并排排列的三张图片。每个图像都放在它自己的 div 中。它工作正常，但 CSS 看起来很拥挤。您能否在同一个 div 中对齐三个图像，而不是每个图像都有一个 div？

.subSectOne {
    position: absolute; left: 20%;
    float: left;
    padding: 20px;
    background: url(../images/paw1.png);
    overflow: hidden;
}

.subSectTwo {
    position: absolute; left: 40%;
    float: left;
    padding: 20px;
    background: url(../images/paw2.png);
    overflow: hidden;
}

.subSectThree {
    position: absolute; left: 60%;
    float: left;
    padding: 20px;
    background: url(../images/paw3.png);
    overflow: hidden;
}

<div class="subSection">  
  
                <div class="subSectOne">

                </div>
                <div class="subSectTwo">

                </div>
                <div class="subSectThree">

                </div>
</div>

Answer 1

你在找这样的东西吗？

<style>
    .container {
        width: 100%;
    }

    img.img {
        display: block;
        width: 30%;
        float: left;
        /* other styles */
    }

    .clear {
        clear: both;
    }
</style>   

 <div class="container">
        <img class="img img1" title="img1" src="/images/img1.png">
        <img class="img img2" title="img2" src="/images/img2.png">
        <img class="img img3" title="img3" src="/images/img3.png">
        <div class="clear"></div>
 </div>

Answer 2

我想我找到了一个很好的解决方案来解决你的问题。我添加了一个新的 class .row 并在此 class 中为 background-images 设置了 div 属性。

body{
    margin: 0;
}
.subSection{
    width: 100%;
    height: 200px;
}

.subSectOne {
    background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRYXNLuN8M8-f0TZUM9DIiMD3bNN6B8hyvlyttFrUdN423bn7ZD) no-repeat;
}

.subSectTwo {
    background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRYXNLuN8M8-f0TZUM9DIiMD3bNN6B8hyvlyttFrUdN423bn7ZD) no-repeat;
}

.subSectThree {
    background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRYXNLuN8M8-f0TZUM9DIiMD3bNN6B8hyvlyttFrUdN423bn7ZD) no-repeat;   
}

.row{
    height: 100%;
    float: left;
    width: calc(100%/3);
    background-size: contain;
}

<div class="subSection">  
   <div class="row subSectOne"></div>
   <div class="row subSectTwo"></div>
   <div class="row subSectThree"></div>
</div>

注意：在.subSectOne、.subSectTwo和.subSectThree之后插入.row，因为contain- 属性如果您不这样做，将不会触发。

Answer 3

你可以，试试这个 https://jsfiddle.net/uxvg0kod/ 及其响应式

HTML

<div class="subSection">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/350x150">
</div>

CSS

.subSection {
  text-align: center;
}

.subSection img {
  display: inline-block;
  vertical-align: middle;
  width: 30%;
}

对齐图像的正确 CSS 是多少？

What is the correct CSS for aligning images?

html

css

position

image

alignment