將圖像定位在HTML中的div框中

我想將五個圖像放在200px200px的框中。在四個角落，四個圖像，並居中一個圖像。我如何用HTML和CSS做到這一點？將圖像定位在HTML中的div框中

我試過這個，但我無法弄清楚如何做到這一點。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 

    <style type="text/css"> 
    .box{ 
     border: 1px solid black; 
     width: 200px; 
     height: 200px; 
     background-color: aqua; 

    } 

    body{ 
     text-align: center; 


    } 

    .img1{ 
     float: left; 
    } 

    .img3{ 
     float: right; 
    } 

    .img4{ 
     float: right; 
    } 

    .img5{ 
     float: right; 
    } 
    </style> 
</head> 
<body> 

<div class="box"> 
    <img src="frog.jpg" class="img1"> 

    <img src="frog.jpg" class="img2"> 

    <img src="frog.jpg" class="img3"> 

    <img src="frog.jpg" class="img4"> 

    <img src="frog.jpg" class="img5"> 

</div> 

</body> 
</html>

來源

2015-09-17 Hassan S

我們可以看到你的努力？ –

請編輯您的問題。我不能讀這 –

請嘗試此鏈接http://www.htmlgoodies.com/beyond/css/how-to-create-border-images-using-css3.html –

使用絕對定位在角落裏的圖片，我用的是line-height招垂直居中中間圖像。

.images { 
 
    width: 200px; 
 
    height: 200px; 
 
    line-height: 200px; 
 
    position: relative; 
 
    border: 1px solid #000; 
 
    text-align: center; 
 
} 
 

 
.topleft { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.topright { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
} 
 

 
.bottomleft { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 

 

 
.bottomright { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 

 
.center { 
 
    vertical-align: middle; 
 
}

<div class="images"> 
 
    <img src="http://lorempixel.com/50/50/" class="topleft"> 
 
    <img src="http://lorempixel.com/50/50/" class="topright"> 
 
    <img src="http://lorempixel.com/50/50/" class="bottomleft"> 
 
    <img src="http://lorempixel.com/50/50/" class="bottomright"> 
 
    <img src="http://lorempixel.com/50/50/" class="center"> 
 
</div>

來源

2015-09-17 08:37:58

非常感謝你，它只是工作完美。 –

我怎樣才能把它放在頁面的中心？你能幫忙嗎？ –

將圖像定位在HTML中的div框中

回答

相關問題