Изображения выравниваются в столбцах

Question

Я пытаюсь выровнять несколько изображений по горизонтали и вертикали внутри галереи WordPress. Я хочу иметь сетку из трех изображений подряд, каждая из которых выровнена по середине.

Вот структура:

<div class="gallery"> 
    <dl> 
     <dt><img src="#" /></dt> 
    </dl> 
    <dl> 
     <dt><img src="#" /></dt> 
    </dl> 
    <dl> 
     <dt><img src="#" /></dt> 
    </dl> 
    <dl> 
     <dt><img src="#" /></dt> 
    </dl> 
</div> 

И то, что я до сих пор в CSS:

.gallery { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 

dl { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

Центрирование хорошо работает до сих пор. Но это делает много столбцов, поскольку есть изображения. То, что я хочу, это новая строка после каждого третьего изображения.

Вот jsfiddle того, что я сделал до сих пор.

Спасибо за помощь!

Answer 1

Вы можете использовать display: inline-block и добавить width: 33% вместо:

.gallery { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
dl { 
 
    display: inline-block;/*add display inline block*/ 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    width: 33%;/*set width to 33%*/ 
 
}

<div class="gallery"> 
 
    <dl> <dt><img src="http://placehold.it/400x100" /></dt> 
 

 
    </dl> 
 
    <dl> <dt><img src="http://placehold.it/200x150" /></dt> 
 

 
    </dl> 
 
    <dl> <dt><img src="http://placehold.it/350x180" /></dt> 
 

 
    </dl> 
 
    <dl> <dt><img src="http://placehold.it/250x150" /></dt> 
 

 
    </dl> 
 
</div>