应用'保证金:0px auto'身体元素不起作用

时间:2018-01-15 04:56:16

标签: html css margin

根据this answer,将display: block; float: none; position: relative;放在选择器中应该确保margin: 0px auto技巧可以使元素水平居中。这是我尝试将body置于html元素中心的代码:

body {
    background-color: lightgray;
    float: left;
    font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;

    margin: 0px auto;
    /* Adding these last 3 doesn't seem to make a difference */
    display: block;
    float: none;
    position: relative;
}

当我像0px 500px一样手动指定像素时,效果很好。有谁知道为什么auto在这种情况下似乎没有工作?

编辑:伙计们,即使我指定了身体的宽度,它也不起作用。 https://jsfiddle.net/ozm2x9zx/

4 个答案:

答案 0 :(得分:1)

你必须提到宽度才能使它居中。

<style>
    body {
        margin: auto;
        width:50%;
    }
</style>

对于 0(零)值,也无需提及 px

答案 1 :(得分:0)

你错过了你提到的答案的第4点:

  
      
  1. 元素必须具有非自动
  2. 的宽度   

然后在笔记中解释了这一点:

  

从技术上讲,保证金:0自动适用于自动宽度,但自动宽度优先于自动边距,因此自动边距被归零,使得它看起来好像“不起作用”

因此,为body添加宽度,您会发现它有效。啊,但这里有一个问题:你将它应用于身体,而不是页面上的任何元素。它有效,但除非你使html的颜色与body不同,否则你不会看到效果。试试这个:

html {
  background-color: red;
}

body {
  background-color: lightgray;
  float: left;
  font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
  margin: 0 auto;
  display: block;
  float: none;
  position: relative;
  width: 70%;
}

答案 2 :(得分:0)

你需要移除身体元素上的浮子,你的容器完全位于中间。

此外,无需将单位类型(px)归因于零值。

考虑:

  body {
        background-color: lightgray;
        background-image: url('../images/brushed.png');
        background-repeat: repeat;
        font-family: 'Lato', 'Roboto', 'Arial', 'Verdana', sans-serif;
        margin:0;
    }

    div#container {
        background-color: #aaaaaa;
        color: white;
        width: 960px;
        margin: 0 auto;
    }

答案 3 :(得分:0)

我只是从正文中移除1/tmp/reindex.lock 15/01/18 17:38:54 [INFO] Index started Index started localhost 9999 collection1 Solarium returned something Solarium_Client Object ( [_options:protected] => Array ( [adapter] => Solarium_Client_Adapter_Http [adapteroptions] => Array ( [host] => localhost [port] => 9999 [core] => collection1 [path] => /solr/ [timeout] => 60 ) ) [_queryTypes:protected] => Array ( [select] => Array ( [query] => Solarium_Query_Select [requestbuilder] => Solarium_Client_RequestBuilder_Select [responseparser] => Solarium_Client_ResponseParser_Select ) [update] => Array ( [query] => Solarium_Query_Update [requestbuilder] => Solarium_Client_RequestBuilder_Update [responseparser] => Solarium_Client_ResponseParser_Update ) [ping] => Array ( [query] => Solarium_Query_Ping [requestbuilder] => Solarium_Client_RequestBuilder_Ping [responseparser] => Solarium_Client_ResponseParser_Ping ) [mlt] => Array ( [query] => Solarium_Query_MoreLikeThis [requestbuilder] => Solarium_Client_RequestBuilder_MoreLikeThis [responseparser] => Solarium_Client_ResponseParser_MoreLikeThis ) [analysis-document] => Array ( [query] => Solarium_Query_Analysis_Document [requestbuilder] => Solarium_Client_RequestBuilder_Analysis_Document [responseparser] => Solarium_Client_ResponseParser_Analysis_Document ) [analysis-field] => Array ( [query] => Solarium_Query_Analysis_Field [requestbuilder] => Solarium_Client_RequestBuilder_Analysis_Field [responseparser] => Solarium_Client_ResponseParser_Analysis_Field ) [terms] => Array ( [query] => Solarium_Query_Terms [requestbuilder] => Solarium_Client_RequestBuilder_Terms [responseparser] => Solarium_Client_ResponseParser_Terms ) [suggester] => Array ( [query] => Solarium_Query_Suggester [requestbuilder] => Solarium_Client_RequestBuilder_Suggester [responseparser] => Solarium_Client_ResponseParser_Suggester ) ) [_pluginTypes:protected] => Array ( [loadbalancer] => Solarium_Plugin_Loadbalancer [postbigrequest] => Solarium_Plugin_PostBigRequest [customizerequest] => Solarium_Plugin_CustomizeRequest [parallelexecution] => Solarium_Plugin_ParallelExecution [bufferedadd] => Solarium_Plugin_BufferedAdd [prefetchiterator] => Solarium_Plugin_PrefetchIterator ) [_pluginInstances:protected] => Array ( ) [_adapter:protected] => [_requestBuilders:protected] => ) ping creation worked Solarium_Query_Ping Object ( [_options:protected] => Array ( [resultclass] => Solarium_Result_Ping [handler] => admin/ping ) [_helper:protected] => [_params:protected] => Array ( ) ) exeption from ping request Failed to initialise Solr client: Solr HTTP error: Not Found (404) Failed to initialise Solr client: Solr HTTP error: Not Found (404) ,它居中+

大部分时间 - &gt;使用float:left;

可以正常使用margin:0px auto;

display:table;