Responsive CSS square with centered text
CSS
50
Responsive
4
vertical center
1
White

Toan Nguyen viết ngày 10/07/2015

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


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Toan Nguyen

3 bài viết.
4 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
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...
Toan Nguyen viết 5 năm trước
14 7
White
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 ...
Toan Nguyen viết hơn 5 năm trước
2 1
Bài viết liên quan
White
25 21
Bạn muốn load 3 image khác nhau (Ý mình ở đây là dùng tag không phải background nhé) cho 3 loại màn hình khác nhau (small, medium, large). Bạn sẽ l...
My Mai viết hơn 5 năm trước
25 21
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
3 bài viết.
4 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!