Как сделать цветную рамку вокруг центрированных изображений

Question

У меня в основном есть стек изображений, которые завернуты в div, который центрирует весь стек. Я хотел бы создать толстую границу или дополнение вокруг всего стека, а не отдельные изображения, но я не знаю, как это сделать с помощью css. любая помощь была бы большой. Каждое изображение также находится в собственном div для других целей стиля. Кроме того, добавление атрибутов стиля к отдельным изображениям неприемлемо, поскольку изображения фактически отображаются с использованием директивы angularjs ng-repeat. ниже - это просто псевдокод для того, что по сути происходит, но я ищу способ ограничить весь стек изображений.

<div class="center"> 
    <div> 
     <img> 
    </div> 
    <div> 
     <img> 
    </div> 
    <div> 
     <img> 
    </div> 
</div> 

Answer 1

Заканчивать этот codepen:

Это создает границу вокруг вашего внешнего DIV:

.center { 
    border: 5px solid #D32232; 
} 

Я использовал твердую линию. Вы также можете использовать другие линии. Эти возможности:

• пунктир
• пунктирной
• двойного
• канавка
• хребта
• врезки
• боковика

Заканчивать эту страницу для полной документации по border.

Answer 2

вы могли граничить ваш внешний DIV с черным контуром

.center{ border: 5px solid #000;} 

и затем ваши внутренние дивы с цветом

.center div{border: 4px dashed blue;} 

если вы хотите очертить каждый IMG, если там было больше, чем один в div вы могли бы сделать что-то вроде этого

.center div img{border: 3px dotted red;} 

Answer 3

Вам понадобится еще одна обертка, обернутая вокруг i маги сделать это. В противном случае это невозможно.

.center { 
 
    text-align: center; 
 
    border: 2px solid red; 
 
    padding: 5px; 
 
} 
 
.wrapper { 
 
    display: inline-block; 
 
    border: 2px solid green; 
 
    font-size: 0; 
 
} 
 
.wrapper div { 
 
    display: inline-block; 
 
    padding: 5px; 
 
} 
 
.wrapper div img { 
 
    display: block; 
 
}

<div class="center"> 
 
    <div class="wrapper"> 
 
    <div> 
 
     <img src="http://lorempixel.com/output/city-q-c-100-100-5.jpg" alt=""> 
 
    </div> 
 
    <div> 
 
     <img src="http://lorempixel.com/output/city-q-c-100-100-5.jpg" alt=""> 
 
    </div> 
 
    <div> 
 
     <img src="http://lorempixel.com/output/city-q-c-100-100-5.jpg" alt=""> 
 
    </div> 
 
    </div> 
 
</div>