Responsive CSS square with centered text
CSS
43
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
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 gần 4 năm trước
14 7
White
1 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 4 năm trước
1 1
{{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á!