Trong việc thiết kế website sẽ có mẫu web ta cần canh văn bản nằm ngay giữa một khu vực cụ thể nào đó, cụ thể là trong div, điều này tương đối dễ dàng với các nhà thiết kết web lâu năm, tuy nhiên với một số bạn newbie thì đôi khi nó là một vấn đề khó khăn vì có rất nhiều cách khác nhau để thực hiện điều này. Bài viết này tôi xin hướng dẫn một cách đơn giản đẻ canh giữa nội dung văn bản trong một thể div cố định bằng CSS.
Như các bạn thấy ở mã CSS trên tôi sử dụng ba thông số là "text-align: center;", "display: table-cell;", và "vertical-align: middle;" hiểu đơn giản tôi thể hiện div dưới dạng table-cell và canh văn bản nằm ở vị trí giữ cell bằng hai thông số còn lại, bạn có thể xem thêm demo và ví dụ bên dưới để hiểu rõ hơn cách nó thực hiện.
Example CSS Center Text:
Source Code CSS Center Text:
div{
height: 100px;
width: 100px;
text-align: center;
border:1px solid silver;
display: table-cell;
vertical-align: middle;
}
height: 100px;
width: 100px;
text-align: center;
border:1px solid silver;
display: table-cell;
vertical-align: middle;
}
Như các bạn thấy ở mã CSS trên tôi sử dụng ba thông số là "text-align: center;", "display: table-cell;", và "vertical-align: middle;" hiểu đơn giản tôi thể hiện div dưới dạng table-cell và canh văn bản nằm ở vị trí giữ cell bằng hai thông số còn lại, bạn có thể xem thêm demo và ví dụ bên dưới để hiểu rõ hơn cách nó thực hiện.
Example CSS Center Text:
http://blog.vnlives.net/
Source Code CSS Center Text:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
div {
height:90PX;
width:90PX;
text-align:center;
border:1px solid silver;
display: table-cell;
vertical-align:middle;
}
</style>
</head>
<body>
<div>http://blog.vnlives.net/</div>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
div {
height:90PX;
width:90PX;
text-align:center;
border:1px solid silver;
display: table-cell;
vertical-align:middle;
}
</style>
</head>
<body>
<div>http://blog.vnlives.net/</div>
</body>
</html>
No comments:
Post a Comment