Saturday, May 6, 2017

Đặt ảnh nằm giữa theo chiều dọc trong thẻ div(vertical align image)

Để thực hiện việc căn ảnh nằm giữa theo chiều dọc, bạn có thể sử dụng một số chiêu sau đây:

1:Đặt thuộc tính line-height và vertical-align cho thẻ div cha:
.parent-div{
     line-height:100px; /* 100px Số này là tùy bạn*/
     vertical-align: middle;
}

Nếu cách 1 không được hãy thử cách 2 sau đây: sử dụng thuộc tính display
.parent-div{
       display: flex;
}
và với ảnh bên trong đặt css như sau
img{
        margin: auto;
}

Nếu cách 2 không được hãy thử cách thứ 3 sau:
css cho thẻ img bên trong như sau
img{          
    1. transform: translateY(-50%);
    2. top: 50% !important;
}

Nếu cách cuối cùng vẫn không được, Xin chúc bạn google may mắn hơn :D