Responsive CSS square with centered text
CSS
40
Responsive
3
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
12 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 gần 3 năm trước
12 7
{{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á!