[CSS] Tổng hợp Canh giữa màn hình của div - Center div align horizontal
Posted: Thu Oct 20, 2016 7:14 am
[CSS] Tổng hợp Canh giữa màn hình của div - Center div align horizontal
Note lại kẻo lại quên canh giữa thường là của paragraph
Nhưng với div thường text-align bị vô hiệu thì có thể sử dụng cách sau:
Cách 1 có hoặc không có width thì dùng với display: table và margin: auto
Cách 2: phải có width thì dùng với display: block và margin: 0 auto (- margin-left:auto, margin-right:auto)
Cách 3: với display:flex và justify-content: center nhưng lúc này width được chỉ định thì chỉ center trong div, width không được chỉnh thì center theo chiều ngang màn hình.
Chúc bạn thành công!
Note lại kẻo lại quên canh giữa thường là của paragraph
Code: Select all
<style>
.parCenter
{
text-align: center;
}<style>
Code: Select all
<p class="parCenter"> tthlan.info - canh giữa <p></p>
Cách 1 có hoặc không có width thì dùng với display: table và margin: auto
Code: Select all
<style>
.divTable
{
height:200px;
/* width:40%; */
background: #cdcdcd;
display:table;
margin:auto;
}
</style>
Code: Select all
<div class="divTable"><div class="divChild"> tthlan.info - canh giữa <div></div></div>
Code: Select all
<style>
.divBlock
{
display: block;
margin-left: auto;
margin-right: auto;
background: #29679a;
width:200px; // important
height: 100px;
}
</style>
Code: Select all
<div class="divBlock"> tthlan.info - canh giữa <div></div>
Code: Select all
<style>.divFlex
{
display: flex;
justify-content: center;
background: #29679a;
height: 100px;
/* width: 800px // center trong div */
}
</style>
Code: Select all
<div class="divFlex"> tthlan.info - canh giữa <div></div>