Позиционирование изображений в поле div в HTML

Я хочу поместить пять изображений в поле 200px200px. В четырех углах четыре изображения и одно центральное изображение. Как я могу это сделать с помощью HTML и CSS?Позиционирование изображений в поле div в HTML

Я пробовал это, но не могу понять, как это осуществить.

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

Большое вам спасибо, он работал просто в совершенстве. –

Как я могу положить его в центр страницы? может помочь? –

Позиционирование изображений в поле div в HTML

ответ

Смежные вопросы