I want to make my images to be align vertical:middle (I am getting my images dynamicly from database.)

Question

<div class="col-md-3 col-sm-6 col-xs-12 center wow fadeInUp" data-wow-delay="0.2s" style="visibility: hidden; animation-delay: 0.2s; animation-name: none;">
                                <div class="thumb-links" style="width:100%;">
                                    <img src="@item.projectImageURL" alt="@item.projectCompany">
                                </div>                             
                            </div>

and CSS

.thumb-links {
display: block;
position: relative;
z-index: 2;
text-align: center;
cursor: pointer;
height: 270px;}

@media (max-width: 767px) {
.thumb-links {
    max-width: 370px;
    margin-left: auto;
    margin-right: auto;
}}
.thumb-links img {
height: auto;
vertical-align:middle;
-moz-transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
-o-transition: 0.5s all ease;
transition: 0.5s all ease;}

images widths and heights are different than each others I cant get them properly. they are going to top of thumb-links.

score 0 · Answer 1 · answered Jan 30 '17 at 08:15

0

.thumb-links{
     clear: both;
 }

Add this css property to your thumb links.

answered Jan 30 '17 at 08:15

Gibbs

21,904
13
74
138

I tried but ıt is same. I made display:inline-block; option with image height:auto still no response. – Mert Kaya Jan 30 '17 at 08:39
Please provide us a fiddle or demo. So that anyone can look into the issue – Gibbs Jan 30 '17 at 08:41

score 0 · Answer 2 · edited May 23 '17 at 11:53

0

https://stackoverflow.com/a/37772582/5194515 I solved it from this link

.thumb-links {
position: relative;
z-index: 2;
text-align: center;
cursor: pointer;
height: 270px;
float:left;
width:270;
display:flex;
align-items:center;
justify-content:center;}

edited May 23 '17 at 11:53

Community

1
1

answered Jan 30 '17 at 09:47

Mert Kaya

15
4

I want to make my images to be align vertical:middle (I am getting my images dynamicly from database.)

2 Answers2