Canh giữa trên dưới chữ trong div

#1

Chào mọi người, mình gặp vấn đề khi canh giữa chữ trong thẻ div ạ, mong mọi người giúp đỡ.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Siêu thị điện máy</title>
<style type="text/css">

body
{
	background-position:top;
	margin:0;
	background-image: url(images/bg.jpg);
}
#container
{
	background-color: #FFFFFF;
	width:920px;
	margin:0 auto;
	border:1px solid #F00;padding:2px;
}
#header
{
	height:173px;
}
#logo
{
	float:left;
	height:173px;
	width:250px;
	border:2px solid #000;
}
#logo img
{
	height:153px;
	width:250px;
}
#banner
{
	float:left;
	height:240px;
	width:920px;
	background-image: url(images/header.jpg);
	
}
#menu
{
	height:51px;
	
}
#menu_left_corner
{
	float:left;
	width:9px;
	height:50px;
	border:1px solid #00F;
	
}
#menu_content
{
	float:left;
	width:920px;
	height:51px;
	background-color: #212226;
	
}
	#menu_content ul
	{
	    padding-left: 180px;
	}
#menu_content ul li
{
	float: left;
	list-style-type: none;
	padding: 0px 40px;
}
#menu_content a
	{
		text-decoration: none;
		color: #FFFFFF;
	}
	#menu_content a:hover
	{
		color: #00c6ff;	
	}
#menu_right_corner
{
	float:left;
	width:9px;
	height:50px;
	border:1px solid #00F;
}


#left
{
	width:200px;
	height:230px;
	float:left;
	border:2px solid #000;
}
	#left a
	{
		text-decoration: none;
		color: #FFFFFF;
		margin-top: 5px;
	}
	.ten_hang
	{
	  height: 40px;
	}
	.hang
	{
		height: 30px;
		background:  #324203;
	}
	
#content
{
	width:702px;
	height:230px;
	float:left;
	margin-left:10px;
	border:2px solid #000;
}
#right
{
	width:196px;
	height:200px;
	float:right;
	border:2px solid #000;

}

#footer
{
	height:60px;
	color:#847676;
	font-size:12px;
	text-align:center;
	line-height:20px;
	font-style:italic;
	background-image:url(images/layout/footer_bg.gif);
    border: 2px solid #000;
}


</style>
</head>

<body>
<div id="container">
	<div id="header">
        <div id="banner"></div>
       
    </div>
     <div style="clear:both"></div>
    <div id="menu">
		<div id="menu_content">
			<ul>
				<li><a href="">Trang chủ</a></li>
				<li><a href="">Sản phẩm</a></li>
				<li><a href="">Phụ kiên</a></li>
				<li><a href="">Khuyến mãi</a></li>
				<li><a href="">Liên hệ</a></li>
			</ul>		
		</div>
        <div style="clear:both"></div>
    </div>
    <div style="clear:both; height:15px;"></div>
    <div id="main">
    	<div id="left">
			<div class="hang"><a href="">Các hãng điện thoại</a> </div>
			<div class="ten_hang"><a href="">Nokia</a></div>
			<div class="ten_hang"><a href="">Sasung</a></div>
			<div class="ten_hang"><a href="">HTC</a></div>
			<div class="ten_hang"><a href="">Apple</a></div>
			<div class="ten_hang"><a href="">Blackberry</a></div>
		</div>
        <div id="content">
          <div style="clear:both"></div>
        </div>
    </div>
    <div style="clear:both; height:15px;"></div>
    <div id="footer">
    
    </div>
</div>
</body>
</html>

image
image.jpg1280×720 343 KB

#2

line-height, text-align:center cho thẻ div, hoặc dùng flex

2 Likes
#3

Để căn giữa thì bạn cần thêm thuộc tính

text-align:center;

Và mình chưa thấy dòng này trong đoạn CSS của bạn.

#4

Hi bạn, mình dùng

text-align:center;

thì nó chỉ canh giữa 2 bên thôi bạn, mình cần là canh giữa trên dưới ấy, tại nó nằm trong thẻ div có height xác đinh.

#5

trường hợp parent có height cố định rồi thì mình nghĩ có cách này.

1 Like
#6

Hi bạn, mình cho line-height của chữ bằng với height của thẻ div chứ nó thì nó cũng canh giữa trên dưới, không biết như vậy có đúng ko, còn cách làm của bạn thì giống với ông thầy của mình nên đúng rồi,cảm ơn bạn nha, hjhj.

#7

Đấy cũng là 1 cách nhưng nếu nội dung nó thành nhiều dòng thì sẽ rất xấu

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?