text-align的理解
实验代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平居中</title>
<style>
.t1{
text-align: center;
}
.t2 a{
text-align: ;
}
.t3 {
text-align: center;
}
.t4{
text-align: center;
}
input{
text-align: center;
}
.t6{
display: inline-block;
width: 500px;
height: 100px;
background-color: lightpink;
}
.t7{
display: inline-block;
width: 500px;
height: 100px;
background-color: lightpink;
text-align: center;
}
</style>
</head>
<body>
<div class="t1">div实现水平居中t1</div>
<div class="t2">
<a>div a标签水平居中t2</a>
</div>
<div class="t3">
<a>div a标签2水平居中t3</a>
</div>
<p class="t4">p标签水平居中t4</p>
用户名t5:<input />
<br /><br />
<a class="t6">转化为行内块元素的a</a>
<br /><br /><br />
<a class="t7">转化为行内块元素的a 水平居中t7</a>
</body>
</html>
实验效果: