zoukankan      html  css  js  c++  java
  • css layout :center

    <!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 {
         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 */
         400px; /* ie5win fudge begins */
        voice-family: "\"}\"";
        voice-family:inherit;
         370px;
        }
    html>body #content {
         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;
        750px;
        border:5px solid red;
    }

    一定要设置width。

  • 相关阅读:
    linux杂记
    mysql 备份命令
    查看mysql 套接字文件 mysql.sock
    处理下载是文件名乱码正确姿势
    对象创建完成后进行数据同步
    python——数据库编程
    python——网络编程2
    python——网络编程
    python——12、面向对象
    pythoning——11、正则匹配
  • 原文地址:https://www.cnblogs.com/youxin/p/2651499.html
Copyright © 2011-2022 走看看