Как выровнять изображения в div?

Question

Pavel @pashadark

Учусь программировать на python

CSS

Как выровнять изображения в div?

Ни как не могу выровнять изображения в div.
Максимум что сделал это уменьшил картинки до нужного размера.
Красным я обвел как я пытаюсь сделать.
Голубым цветом как они идут сейчас.

.main .workmi {
    display: block;
    width: 35%;
    height: auto;
    float: right;
    position: relative;
    overflow: hidden;
}

И так же в мобильной версии они прижимаются к правому краю.
Подскажите куда смотреть.

Вопрос задан более трёх лет назад
202 просмотра

3 комментария

Подписаться 1 Оценить 3 комментария

Иван @Za0r

я немного не понял,вам надо блок с этими двумя картинками расположить на всю ширину родительского блока?Судя по красной рамке

Написано более трёх лет назад
Pavel @pashadark Автор вопроса

Иван: да!) там не одно фото,они ушли по вертикали

Написано более трёх лет назад

Pavel @pashadark Автор вопроса

вот кусок всего div

.main .workmi{
    display: block;
    width: 20%;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
}

.main .workmi .mediami{
    width: 15%;
    vertical-align: middle;
}

.main .workmi .caption{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    background: #ffffff;
    opacity: 0;
}

.main .workmi a:hover .caption{
    opacity: 1;
}

.workmi .caption .work_title{
    display: block;
    width: 100%;
    position: absolute;
    text-align: center;
    top: 50%;
    margin-top: -40px;
}

.main .workmi .caption h1{
    position: relative;
    display: inline-block;
    padding: 10px 0;
    z-index: 77;
    color: #454545;
    font-family: 'Russo One', sans-serif;
    font-size: 16px;
    letter-spacing: .5px;
    border-bottom: 1px solid #bfbbbb;
    border-top: 1px solid #bfbbbb;
}
.main .workmi .caption h2{
    position: relative;
    display: inline-block;
    max-width: 15%;
    padding: 20px 0;
    z-index: 77;
    color: #454545;
    font-family: 'Russo One', sans-serif;
    font-size: 16px;
    letter-spacing: .5px;
    
    border-top: 1px solid #bfbbbb;
}

А вот кусок работующего div с которого я пытался сделать поменьше картинки.

.main .work{
    display: block;
    width: 33.33333333333333%;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
}

.main .work .media{
    width: 100%;
    vertical-align: middle;
}


.main .work .caption{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    
}

.main .work a:hover .caption{
    opacity: 1;
}

.work .caption .work_title{
    display: block;
    width: 100%;
    position: absolute;
    text-align: center;
    bottom: 5px;
    margin-top: -40px;
    background: #454545;
	opacity: 0.9;
}

.main .work .caption h1{
    position: relative;
    display: inline-block;
    max-width: 90%;
    z-index: 77;
    color: #fa602f;
    font-family: 'Russo One', sans-serif;
    font-size: 16px;
    letter-spacing: .5px;
    
}
.main .work .caption h2{
    position: relative;
    display: inline-block;
    max-width: 90%;
    padding: 20px 0;
    z-index: 77;
    color: #f45c2c;
    font-family: 'Russo One', sans-serif;
    font-size: 36px;
    letter-spacing: .5px;
    border-top: 1px solid #bfbbbb;
    border-bottom: 1px solid #bfbbbb;
}

Написано более трёх лет назад

я немного не понял,вам надо блок с этими двумя картинками расположить на всю ширину родительского блока?Судя по красной рамке
Иван: да!) там не одно фото,они ушли по вертикали

Answer 1 · 2017-06-18 14:08:43

И так же в мобильной версии они прижимаются к правому краю.

Чтобы такого не было, уберите это:
float: right;

Также, учитывая, что у вас относительное позиционирование (position: relative;), то можно попробовать использовать свойства left, right, top и bottom.

Свойство position | WebReference.

Как выровнять изображения в div?

Войдите на сайт