margin：auto和text-align：center不起作用

时间：2016-03-24 13:05:44

标签： html css margin text-align

我正在尝试建立一个网站。出于某种原因，我的'margin：auto'和'text-align：center'属性不起作用。有人可以在检查元素中检查我的代码并告诉我有什么问题吗？ 

body {
  font-family: sans-serif, 'Helvetica';
  background-color: #f9f9f9;
}
.dropdown {
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  display: block;
}
.dropdown:hover .dropdown-content {
  display: block;
}
#my_cycle_head {
  text-align: center;
}
#main_navbar {
  text-align: center;
  margin: 0 auto;
  margin-right: auto;
  margin-left: auto;
  width: 800px;
}
#main_navbar nav a {
  text-decoration: none;
  text-align: center;
}
#main_navbar nav {
  display: inline-block;
  text-align: center;
  padding-right: 20px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Cycle - Home</title>
  <link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>
  <header>
    <h1 id="my_cycle_head">My Cycle</h1>
    <navbar id="main_navbar">
      <nav><a href="#">Home</a>
      </nav>
      <nav class="dropdown">
        <a class="dropbtn">Dropdown</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </nav>
      <nav><a href="faq.html">FAQ's</a>
      </nav>
      <nav><a href="about.html">About</a>
      </nav>
    </navbar>
  </header>
</body>

</html>

3 个答案:

答案 0 :(得分：4)

<navbar>不是HTML元素。如果您有used a validator，则可以使用此功能。

使用包含display: inline的默认样式将无法识别的元素放入DOM中。

自动边距和text-align对display: inline的元素没有影响。

使用正确的HTML，使用<nav>（默认为display: block）。

答案 1 :(得分：0)

我已更正您对navbar到nav的使用，并在其中创建了一系列ul和列表项，以替换所有单独的nav元素。 nav元素是导航元素的一部分，而不是标记每个导航点（请参阅此处：http://html5doctor.com/nav-element/）。

我还重新排序了CSS并使用子选择器（https://css-tricks.com/child-and-sibling-selectors/）来防止主导航的样式向下滚动到下拉菜单。在此示例中，所有文本现在都居中。

＆＃13;
＆＃13; 
    body {
      font-family: sans-serif, 'Helvetica';
      background-color: #f9f9f9;
    }
    #my_cycle_head {
      text-align: center;
    }
    #main_navbar {
      text-align: center;
      margin: 0 auto;
      margin-right: auto;
      margin-left: auto;
      width: 800px;
    }
    #main_navbar > ul > li {
      display: inline-block;
      text-align: center;
      padding-right: 20px;
    }
    #main_navbar > ul > li > a {
      text-decoration: none;
      text-align: center;
    }
    .dropdown {
      position: relative;
    }
    .dropdown-content {
      display: none;
      padding:0;
      position: absolute;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    }
    .dropdown-content > li {
      display: block;
    }
    .dropdown:hover .dropdown-content {
      display: block;
    }
＆＃13; 
<header>
  <h1 id="my_cycle_head">My Cycle</h1>
  <nav id="main_navbar">
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li class="dropdown">
        <a class="dropbtn">Dropdown</a>
        <ul class="dropdown-content">
          <li><a href="#">Link 1</a>
          </li>
          <li><a href="#">Link 2</a>
          </li>
          <li><a href="#">Link 3</a>
          </li>
        </ul>
      </li>
      <li><a href="faq.html">FAQ's</a>
      </li>
      <li><a href="about.html">About</a>
      </li>
    </ul>
  </nav>
</header>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：-2)

请使用div更改导航栏

<?xml version="1.0" encoding="utf-8"?>
<soapenv:Envelope xmlns:oas1="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd" xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:urn="urn:us:gov:treasury:irs:msg:irstransmitterstatusrequest" xmlns:urn1="urn:us:gov:treasury:irs:ext:aca:air:7.0" xmlns:urn2="urn:us:gov:treasury:irs:common" xmlns:urn3="urn:us:gov:treasury:irs:msg:acasecurityheader">
    <soapenv:Header xmlns:wsa="http://www.w3.org/2005/08/addressing">
        <wsse:Security xmlns:wsse="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd" xmlns:wsu="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd">
            <ds:Signature Id="SIG-E68EBBF1696C5DD4AA143353323390579" xmlns:ds="http://www.w3.org/2000/09/xmldsig#">
                <ds:SignedInfo>
                    <ds:CanonicalizationMethod Algorithm="http://www.w3.org/2001/10/xml-exc-c14n#WithComments" />
                    <ds:SignatureMethod Algorithm="http://www.w3.org/2000/09/xmldsig#rsa-sha1" />
                    <ds:Reference URI="#TS-82E7E6716E615C14D6144736030985954">
                        <ds:Transforms>
                            <ds:Transform Algorithm="http://www.w3.org/2001/10/xml-exc-c14n#">
                                <InclusiveNamespaces PrefixList="wsse wsa oas1 soapenv urn urn1 urn2 urn3" xmlns="http://www.w3.org/2001/10/xml-exc-c14n#" />
                            </ds:Transform>
                        </ds:Transforms>
                        <ds:DigestMethod Algorithm="http://www.w3.org/2000/09/xmldsig#sha1" />
                        <ds:DigestValue>[Digest_Value_Replaced]</ds:DigestValue>
                    </ds:Reference>
                    <ds:Reference URI="#id-82E7E6716E615C14D6144736030986559">
                        <ds:Transforms>
                            <ds:Transform Algorithm="http://www.w3.org/2001/10/xml-exc-c14n#">
                                <InclusiveNamespaces PrefixList="oas1 soapenv urn1 urn2 urn3" xmlns="http://www.w3.org/2001/10/xml-exc-c14n#" />
                            </ds:Transform>
                        </ds:Transforms>
                        <ds:DigestMethod Algorithm="http://www.w3.org/2000/09/xmldsig#sha1" />
                        <ds:DigestValue>[Digest_Value_Replaced]</ds:DigestValue>
                    </ds:Reference>
                    <ds:Reference URI="#id-82E7E6716E615C14D6144736030986558">
                        <ds:Transforms>
                            <ds:Transform Algorithm="http://www.w3.org/2001/10/xml-exc-c14n#">
                                <InclusiveNamespaces PrefixList="wsa oas1 soapenv urn1 urn2 urn3" xmlns="http://www.w3.org/2001/10/xml-exc-c14n#" />
                            </ds:Transform>
                        </ds:Transforms>
                        <ds:DigestMethod Algorithm="http://www.w3.org/2000/09/xmldsig#sha1" />
                        <ds:DigestValue>[Digest_Value_Replaced]</ds:DigestValue>
                    </ds:Reference>
                </ds:SignedInfo>
                <ds:SignatureValue>[Signature_Value_Replaced]</ds:SignatureValue>
                <ds:KeyInfo Id="KI-82E7E6716E615C14D6144736030986456">
                    <wsse:SecurityTokenReference wsu:Id="STR-82E7E6716E615C14D6144736030986457" xmlns:wsu="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd" xmlns:wsse="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd">
                        <wsse:KeyIdentifier EncodingType="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-soap-message-security-1.0#Base64Binary" ValueType="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-x509-token-profile-1.0#X509v3">[Cert_Value_Replaced]</wsse:KeyIdentifier>
                    </wsse:SecurityTokenReference>
                </ds:KeyInfo>
            </ds:Signature>
            <wsu:Timestamp wsu:Id="TS-82E7E6716E615C14D6144736030985954">
                <wsu:Created>2016-03-23T09:53:23:55Z</wsu:Created>
                <wsu:Expires>2016-03-23T10:03:23:55Z</wsu:Expires>
            </wsu:Timestamp>
        </wsse:Security>
        <urn:ACABusinessHeader wsu:Id="id-82E7E6716E615C14D6144736030986558" xmlns:wsu="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd">
            <urn1:UniqueTransmissionId>uuid:SYS12:tcc_cd::T</urn1:UniqueTransmissionId>
            <urn2:Timestamp>2016-03-23T09:53:23:55Z</urn2:Timestamp>
        </urn:ACABusinessHeader>
        <urn3:ACASecurityHeader/>
        <wsa:Action>RequestSubmissionStatusDetail</wsa:Action>
    </soapenv:Header>
    <soapenv:Body>
        <urn:ACABulkRequestTransmitterStatusDetailRequest version="1.0" wsu:Id="id-82E7E6716E615C14D6144736030986559" xmlns:wsu="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd">
            <urn1:ACABulkReqTrnsmtStsReqGrpDtl>
                <urn2:ReceiptId>[ReceiptId_Value_Replaced]</urn2:ReceiptId>
            </urn1:ACABulkReqTrnsmtStsReqGrpDtl>
        </urn:ACABulkRequestTransmitterStatusDetailRequest>
    </soapenv:Body>
</soapenv:Envelope>

工作示例：https://jsfiddle.net/Lt0y3ba1/

相关问题
最新问题