對齊圖像的正確CSS是什麼？

我目前正在設計一個網站，其中一個部分並排排列着三個圖像。每張圖片都放在它自己的div中。它工作正常，但CSS看起來擁塞。你可以在同一個div中對齊三張圖片，而不是每張圖片都有一個div嗎？對齊圖像的正確CSS是什麼？

.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>

來源

2015-10-18 Alan Smith

使用絕對定位和浮動起來是沒有意義的 - 第一個「勝利」，並所以第二個是沒有意義的。 – CBroe

你可以試試這個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%; 
}

來源

2015-10-18 13:22:13

儘管我不得不改變，但它完美的作品：Vertical-align：Center;到'中間'，因爲它說這是不正確的CSS。我還必須在圖像中添加一些填充以將它們分開一點。確切地說，我需要清理很多CSS。謝謝 –

很高興我能提供幫助，你對'垂直對齊'是正確的，這是我的錯誤。此外，如果這有助於你，也許你可以接受答案。 –

你在找這樣的事情？

<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>

來源

2015-10-18 10:50:05

我想我找到了一個很好的解決方案，爲您的問題。我添加了一個新類.row，並在此類中爲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>

注意

：插入.row後.subSectOne，.subSectTwo和.subSectThree，因爲contain - 屬性不會被觸發，如果客人不願意這樣做。

來源

2015-10-18 11:18:54

對齊圖像的正確CSS是什麼？

回答

相關問題