【问题标题】:I want set all <div class="rectangle"> tag borders in a center我想在中心设置所有 <div class="rectangle"> 标签边框
【发布时间】:2014-02-28 00:17:32
【问题描述】:
 _______________________________________________
|                                               |
|    Image                                      |
|                                               |
|_______________________________________________|

我想设置一个上面的矩形在我创建的页面的中心,使用 div 标签作为代码是

.rectangle
{
     width: 73.3%;
     margin:0 50 0 0;         
     border-top:1px solid #46464f;
     border-bottom:1px solid #282832;
     border-left:1px solid #282832;
     border-right:1px solid #282832;
     border-bottom-width:medium;
     border-left-width:medium;
     border-right-width:medium;
     border-top-width:medium;
}

我设置&lt;div class="rectangle" align="center"&gt;这个代码不起作用

【问题讨论】:

  • 尝试从here获取一些东西。可能是同样的情况。
  • Here's 另一个相关话题。
  • 只是为了清楚,因为我已经对你真正想要的东西感到困惑。您想将&lt;DIV&gt; 标签设置在页面中心吗?不是&lt;DIV&gt;中的图片或内容?
  • 为了使内容更具可读性,您可以尝试通过合并边框来压缩 CSS:.rectangle {width: 73.3%; margin 0 50px 0 0; border: medium solid #282832; border-top-color: #46464f;}

标签: html css


【解决方案1】:

HTML:

<div class="setCenter">Content inside a div tag</div>

CSS:

body {
    width: 100%;
    height: 100%;
    margin:auto;
}

.setCenter {
    margin:auto;
    width:90%;
    height:auto;
    border:1px solid #000;
    color:Green;
}

这里是DEMO

【讨论】:

    【解决方案2】:

    试试这个:

    HTML:

    <div align="center">
         <img src="http://fin6.com/wp-content/uploads/2013/07/fb81531cc9cf1512dce7f0e5f36e40fe.jpg" alt="nature"/>
    </div>
    

    CSS:

    div{
         width: 300px;
         background:red;
         margin:0 auto;
    }
    
    img{
         width:150px;
         margin:0 auto;
    }
    

    这是一个DEMO

    更新

    根据您更新的问题,使用 margin:0 auto; 将 div 居中。

    .rectangle
    {
         width: 73.3%;
         margin:0 auto;
         border-top:1px solid #46464f;
         border-bottom:1px solid #282832;
         border-left:1px solid #282832;
         border-right:1px solid #282832;
         border-bottom-width:medium;
         border-left-width:medium;
         border-right-width:medium;
         border-top-width:medium;
    }
    

    更新DEMO

    【讨论】:

      【解决方案3】:

      试试这个 CSS 代码:

      .rectangle
      {
          width: 73.3%; margin:0 50 0 0; 
          border-top:1px solid #46464f; 
          border-bottom:1px solid #282832; 
          border-left:1px solid #282832; 
          border-right:1px solid #282832; 
          border-bottom-width:medium; 
          border-left-width:medium; 
          border-right-width:medium; 
          border-top-width:medium;   
          text-align:center;
      }
      

      【讨论】:

        猜你喜欢
        • 2011-01-02
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多