công ty thiết kế website tốt nhất

Trong thiết kế web Việc canh giữa theo chiều ngang thì rất dễ, ta chỉ cần để thuộc tính “text-align:center” là có thể làm được điều đó, nhưng canh giữa theo chiều dọc và chiều ngang cùng mọt lúc thì như thế nào? Tuy nhiên không phải ai cũng biết điều này. Có rất nhiều cách canh giữa như vậy, sau đây là một trong những cách để các bạn tham khảo.

1. Dùng thuộc tính background

Thay vì ta dung một thẻ “img” thì ta cho thẻ “div” đó một thuộc tính background là tấm hình đó, cái này lúc trước tôi tự nghĩ ra được khi làm một dự án về studio.

Đây là dự án đó, trang này tôi code tay, lúc đó còn ít kinh nghiệm nên code cũng hơi lập chập, các bạn click vào một album nào đó bất kỳ để xem slider chạy.

Đây là đoạn code ví dụ
Source code      

htmlAbsolute in css and importance in the interfaceAbsolute trong css và tầm quan trọng trong giao diện. chi tiết ... » {
width:100%;
height:100%;
background:url(logoImpressive Logo CollectionBộ Sưu Tập Những Logo Ấn Tượng. chi tiết ... ».png) center center no-repeat;
}

Cách này phù hợp với những thành phần mang thuộc tính absolute, rất dễ sử dụng.

2. Sử dụng thuộc tính Table

Cách này sử dụng với những phần tử không mang thuộc tính absolute thôi.     

<div>
<img src="images/abc.jpg" alt="hinh ảnh" />
</div>

Ta áp dụng đoạn css như sau:   

.hinh{
text-align:center;
width:300px;
height:300px;
line-height:300px;
text-align:center;
}
.hinh img{
vertical-align:middle;
}

Nhìn vô code ở trên chắc không quá khó hiểu phải không? để tôi giải thích một chút qua cho các bạn.

Thẻ Div mang class là hình có chiều ngang và chiều cao là 300px, điều quan trọng ở đây là ta khai báo cái line của nó bằng với chiều cao của cái thẻ div đó.

sau đó ta dung thuộc tính “vertical-align:middle;” để canh giữa tấm ảnh này, tấm ảnh canh giữa theo chiều cao xác định theo line-height chứ không phải “height”, các bạn chú ý.

Còn một điều đáng lưu ý nữa là, nếu thẻ div đó mang thuộc tính “padding” thì nó sẽ không hoặ động được đâu nhé.

cái này thường được dùng cho các trang web trình bày sản phẩm hoặc các slider dạng vertical hoặc horizoncal ( chạy ngang và chạy dọc)

3. Canh chỉnh theo Absolute

Cách này cũng được rất nhiều người sử dụng, tôi dung luôn đoạn html ở trên để làm ví dụ nhé, ta dùng đoạn css như sau:
Source code      

.hinh{
width:300px;
height:300px;
position:relative;
}
.hinh img{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
}

Cái khác ở cách này là tấm hình mang thuộc tính absolute, đầu tiên ta cho góc ở trên và bên trái của tấm ảnh trùng với tâm của thẻ “div”
sau đó ta cho giá tri ảnh là 200 x 200 và cho nó chạy ngược lại theo “top” và “left” một đoạn bằng nửa chiều cao và nửa chiều ngang của tấm ảnh đó.

Đây là 3 cách canh giữa mà thường hay sử dụng, tùy theo trường hợp mà ta sử dụng nó, không phải trường hợp nào cũng sử dụng được.