代码改变世界

css layout ：center

  youxin  阅读(317)  评论(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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    color: #ccc;
    background-color: #333;
}
#content{
     
    padding:10px;
    margin:20px auto;
    background: #666;
    border: 5px solid #ccc;
     text-align:left; 
   
    width:370px;
}
</style>
</head>

<body>
<div id="content">
<pre>

body {
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px;
    font-family: verdana, arial, helvetica, sans-serif;
    color: #ccc;
    background-color: #333;
    text-align: center;
    /* part 1 of 2 centering hack */
    }
#content {
    width: 400px; 
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: auto;
    margin-left: auto;     
    /* opera does not like 'margin:20px auto' */
    background: #666;
    border: 5px solid #ccc;
    text-align:left; 
    /* part 2 of 2 centering hack */
    width: 400px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 370px;
    }
html>body #content {
    width: 370px; /* ie5win fudge ends */
    }
</pre>

<div align="right"><p><a href="css/01_centered_box.css">[full css]</a></p></div>

</div>

</body>
</html>
复制代码

显示如下：

http://www.thenoodleincident.com/tutorials/box_lesson/basic_centered.html

还可以这样：

设置

body{
     margin:0 auto;
    width:750px;
    border:5px solid red;
}

一定要设置width。

 

编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示