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

Question

[Pavel]

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

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

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

Comments

[Иван]

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

[Pavel]

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

[Pavel]

вот кусок всего 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

[Александр]

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

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

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

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

Comments

[Pavel]

После удаления

float: right;

Теперь так

[Александр]

pashadark: добавьте display: inline;.

[Froggyweb]

Вообще это делается на js иначе при изменении размера фотки или изменении ширины браузера все развалится или в крайнем случае появятся рваные края.

[Pavel]

Froggyweb: а не подскажите как реализовать это на php? Где прочесть?

[Александр]

pashadark: никак. PHP - серверный язык.