CSSçæ°´å¹³å± ä¸æå·§
1ãåè¡æåçæ°´å¹³å± ä¸
è¯æ³ï¼
text-align:center;
ä¾ï¼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>å·¥å
·æåtext</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.text {
width: 500px;
height: 100px;
text-align: center;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="text"> CSSåè¡ææ¬æ°´å¹³å±
ä¸</div>
</body>
</html>
è¿è¡æªå¾ï¼
2ãå
ç´ çæ°´å¹³å±
ä¸
ï¼1ï¼åå
ç´ ï¼blockï¼
å¨CSSä¸ï¼å¯¹äºåå
ç´ å¦æ设置äºå®½ï¼ç´æ¥å®ä¹margin-leftåmargin-righté½ä¸ºautoå°±è½å®ç°æ°´å¹³å±
ä¸ã
è¯æ³ï¼
margin:0 auto;
//注æè¦ä½¿ç¨è¯¥è¯æ³å®ç°åå
ç´ çæ°´å¹³å±
ä¸ï¼ä¸å®è¦æå®åå
ç´ ç宽度ã
举ä¾ï¼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
div {
width: 500px;
height: 100px;
margin: 0 auto;
background-color: chartreuse;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
è¿è¡æªå¾ï¼
ï¼2ï¼è¡å
å
ç´ ï¼inlineï¼åå¤åè¡å
å
ç´ ï¼inline-*ï¼
è¯æ³ï¼
text-align:center;
ä¹å°±æ¯è¯´"text-align:center;"ä¸ä»
å¯ä»¥ç¨äºåè¡æåï¼ä¹å¯ä»¥ç¨äºè¡å
å
ç´ åå¤åè¡å
å
ç´ ãå¤åè¡å
å
ç´ å
æ¬: inline-blockãinline-table以åinline-flexä¹ç±»çå
ç´ ã
举ä¾ï¼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.box {
width: 500px;
height: 200px;
border: 1px solid black;
text-align: center;
}
.text {
display: inline-block;
width: 100px;
height: 100px;
background-color: chartreuse;
}
</style>
</head>
<body>
<div class="box">
<div class="text"></div>
</div>
</body>
</html>
è¿è¡ç»æï¼