Xóa bài viết
Bạn có chắc chắn muốn xóa bài viết này không ?
Xóa bình luận
Bạn có chắc chắn muốn xóa bình luận này không ?
Responsive CSS square with centered text
Sau đây là cách để tạo một square div và canh giữa theo chiều dọc bằng css. Đây là cách làm rất hay, hỗ trợ được những browser đời cũ như IE8 mà ko cần phải dùng javascript.
Square div
HTML
<div class='square-box'>
<div class='square-content'>Nội dung ở đây</div>
</div>
CSS
.square-box{
position: relative;
width: 50%;
overflow: hidden;
background: #4679BD; /** có màu để dễ xem **/
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
Centered text
HTML
<div class="center-text">
<span>Nội dung ở đây</span>
</div>
CSS
.center-text{
display: table;
width: 200px;
height: 200px;
/** có màu vô cho dễ xem **/
background: #4679BD;
color: #fff;
}
.center-text span{
display: table-cell;
text-align: center;
vertical-align: middle;
}
Sample:
Bình luận

{{ comment.user.name }}
Bỏ hay
Hay

Cùng một tác giả

14
7
Đặt vấn đề Đây là mẹo khi style một menu có thiết kế trải đều hết chiều rộng container mà số lượng item không cố định. Kiểu như: | Menu 1 Menu 2...

2
1
Hôm qua mình có setup 1 cái VPS để cài wordpress. Cài được rồi thì upload theme & plugins lên để dùng thì wordpress không có quyền ghi lên thư mục ...