让div居中对齐

来源：本站原创点击：

使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。
.style{margin-left:auto;margin-right:auto;}
缩写形式为：
.style{margin:0 auto;}
数字0 表示上下边距是0。可以按照需要设置成不同的值。

查看下面的例子：

运行代码
无着色模式
复制
打印
?

<!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” lang=“zh-cn”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>居中div演示效果</title>
<style type=“text/css”>
.align-center{
margin:0 auto; /* 居中这个是必须的，，其它的属性非必须 */
width:500px; /* 给个宽度顶到浏览器的两边就看不出居中效果了 */
background:red; /* 背景色 */
text-align:center; /* 文字等内容居中 */
}
</style>
</head>
<body>
<div class=“align-center”>居中div演示效果</div>
</body>
</html>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br /><html xmlns=”http://www.w3.org/1999/xhtml” lang=”zh-cn”><br /><head><br /><meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /><br /><title>居中div演示效果</title><br /><style type=”text/css”><br />.align-center{<br /> margin:0 auto; /* 居中这个是必须的，，其它的属性非必须 */<br /> width:500px; /* 给个宽度顶到浏览器的两边就看不出居中效果了 */<br /> background:red; /* 背景色 */<br /> text-align:center; /* 文字等内容居中 */<br />}<br /></style><br /></head></p> <p><body><br /><div class=”align-center”>居中div演示效果</div><br /></body><br /></html>

注意，需要加上上面的那句

才能生效，要是不想要这句的话，也可以给body加一个属性：
body{text-align:center;}

另外，让div内的内容（包括文字及图片）居中的代码是： text-align:center;

今天的文章让div居中对齐分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/28503.html

让div居中对齐

让div居中对齐

相关推荐

发表回复