CSS 对齐
程序员文章站
2022-04-26 16:04:45
...
使用margin的中间调整
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style>
.center {
margin:auto;
width:60%;
border:3px solid #73AD21;
padding:10px;
}
</style>
</head>
<body>
<h2>元素居中对齐</h2>
<p>水平居中块级元素 (如 div), 可以使用 margin: auto;</p>
<div class="center">
<p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
</div>
</body>
</html>左/右位置对齐
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style>
.right {
position:absolute;
right:0px;
width:300px;
border:3px solid #73AD21;
padding:10px;
}
</style>
</head>
<body>
<h2>右对齐</h2>
<p>以下实例演示了如何使用 position 来实现右对齐:</p>
<div class="right">
<p>菜鸟教程 -- 学的不仅是技术，更是梦想！！</p>
</div>
</body>
</html>使用跨浏览器解决方案，设置左/右位置对齐
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style>
body {
margin:0px;
padding:0px;
}
.right {
float:right;
background-color: #b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p><b>注意: </b>当使用浮动属性对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。</p>
</div>
</body>
</html>左/右对齐，浮动
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style>
.right {
float:right;
width:300px;
border:3px solid #73AD21;
padding:10px;
}
</style>
</head>
<body>
<h2>右对齐</h2>
<p>以下实例演示了使用 float 属性来实现右对齐:</p>
<div class="right">
<p>我老爹在小时候给我的一些人生建议，我现在还记忆深刻。</p>
</div>
</body>
</html>
使用跨浏览器解决方案，设置左/右位置对齐，浮动
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style>
body {
margin:0px;
padding:0px;
}
.right {
float:right;
width:300px;
background-color: #b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p><b>注意: </b>当使用浮动属性对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。</p>
</div>
</body>
</html>
下一篇： 业务层和持久层单元测试的实践