css div不会居中

时间：2015-06-02 14:09:45

标签： html css

我一直在搜索这个网站以寻找这个问题的答案，但没有一个有效，或者我已经在我的代码中得到了给定的答案。所以，这是我的代码：

@import url(http://fonts.googleapis.com/css?family=Roboto:500,400italic,300,500italic,300italic,400);
@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
html {
  font-family: Roboto, sans-serif;
  width: 100%;
  height: 100%;
}
body {
  margin: 0 0 0 0;
  width: 100%;
  height: 100%;
}
.the-big-image {
  margin: 0 0 0 0;
  width: 100%;
  height: 100%;
  background-image: url(img/rocks.jpg);
}
.the-big-image-cover {
  margin: 0 0 0 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(rgba(0, 77, 64, 0.28), rgba(0, 0, 0, 0.5));
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgba(0, 77, 64, 0.28), rgba(0, 0, 0, 0.5));
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgba(0, 77, 64, 0.28), rgba(0, 0, 0, 0.5));
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(0, 77, 64, 0.28), rgba(0, 0, 0, 0.5));
  /* Standard syntax */
}
nav {
  margin: 0 0 0 0;
  width: 100%;
  height: 70px;
}
.nav-wrapper {
  margin: 0 auto 0 auto;
  width: 70%;
  height: 100%
}
.brand-logo {
  font-family: quicksand, sans-serif;
  color: rgba(0, 0, 0, .7);
  font-size: 40pt;
  font-weight: 300;
  display: inline-block;
  margin: 0 auto 0 auto;
  width: 300px;
}
.text-center {
  text-align: center;
}
.divider {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 5px #888888;
}
.hamburger-container {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  dispaly: inline-block;
}
.icon-bar {
  margin: 4px 4px 4px 4px;
  display: block;
  width: 45px;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 2px;
}
.right {
  float: right;
}
<body>
  <div class="the-big-image">
    <div class="the-big-image-cover">
      <nav>
        <div class="nav-wrapper">
          <span class="brand-logo text-center">logo</span>
          <button class="hamburger-container right">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
      </nav>
      <div class="divider"></div>`

我真的只想知道为什么班级.brand-logo不会居中。我为它设置了一个宽度。我在上面设置了宽度。我确定它不是一个块元素。我用自动添加了保证金代码。为什么它不起作用？

4 个答案:

答案 0 :(得分：4)

您的徽标位于跨度的中心，但您的跨度不是导航栏的整个宽度。将您的徽标拉出一个具有绝对定位的新div，并将其置于该div中。见下面的例子：

@import url(http://fonts.googleapis.com/css?family=Roboto:500,400italic,300,500italic,300italic,400);
@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
html {
  font-family: Roboto, sans-serif;
  width: 100%;
  height: 100%;
}
body {
  margin: 0 0 0 0;
  width: 100%;
  height: 100%;
}
.the-big-image {
  margin: 0 0 0 0;
  width: 100%;
  height: 100%;
  background-image: url(img/rocks.jpg);
}
.the-big-image-cover {
  margin: 0 0 0 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(rgba(0, 77, 64, 0.28), rgba(0, 0, 0, 0.5));
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgba(0, 77, 64, 0.28), rgba(0, 0, 0, 0.5));
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgba(0, 77, 64, 0.28), rgba(0, 0, 0, 0.5));
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(0, 77, 64, 0.28), rgba(0, 0, 0, 0.5));
  /* Standard syntax */
}
nav {
  margin: 0 0 0 0;
  width: 100%;
  height: 70px;
}
.nav-wrapper {
  margin: 0 auto 0 auto;
  width: 70%;
  height: 100%
}
.brand-logo {
  font-family: quicksand, sans-serif;
  color: rgba(0, 0, 0, .7);
  font-size: 40pt;
  font-weight: 300;
  display: inline-block;
  margin: 0 auto 0 auto;
  width: 300px;
}
.text-center {
  text-align: center;
}
.divider {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 5px #888888;
}
.hamburger-container {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  dispaly: inline-block;
}
.icon-bar {
  margin: 4px 4px 4px 4px;
  display: block;
  width: 45px;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 2px;
}
.right {
  float: right;
}
.logoDiv{
position: absolute;
width: 100%;
text-align:center;
margin: auto;
}
<body>
  <div class="the-big-image">
    <div class="the-big-image-cover">
      <nav>
        <div class="logoDiv">
          <span class="brand-logo text-center">logo</span>
        </div>
        <div class="nav-wrapper">
          <button class="hamburger-container right">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
      </nav>
      <div class="divider"></div>`

答案 1 :(得分：2)

你在CSS中缺少一个用于父元素的分号。修复它并添加text-align：center;为我工作。试试这个。

.nav-wrapper {
    margin: 0 auto 0 auto;
    width: 70%;
    height: 100%;
    text-align: center;
}

答案 2 :(得分：1)

在using System.IO; using System.Xml; using System.Xml.Linq; using System.Reflection; class Program { static void Main(string[] args) { string xml = @"C:\src\Apps\Wit\MergingAlgorithmTest\MergingAlgorithmTest\Tests\XMLMerge-DocTypeExpansion\DocTypeExpansion.0.xml"; var xmlSettingsIgnore = new XmlReaderSettings { CheckCharacters = false, DtdProcessing = DtdProcessing.Ignore }; var xmlSettingsParse = new XmlReaderSettings { CheckCharacters = false, DtdProcessing = DtdProcessing.Parse }; using (var fs = File.Open(xml, FileMode.Open, FileAccess.Read)) { using (var xmkReaderIgnore = XmlReader.Create(fs, xmlSettingsIgnore)) { // Prevents Exception "Reference to undeclared entity 'question'" PropertyInfo propertyInfo = xmkReaderIgnore.GetType().GetProperty("DisableUndeclaredEntityCheck", BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic); propertyInfo.SetValue(xmkReaderIgnore, true, null); var doc = XDocument.Load(xmkReaderIgnore); Console.WriteLine(doc.Root.ToString()); // outputs <sgml></sgml> not <sgml>&question;&signature;</sgml> }// using xml ignore fs.Position = 0; using (var xmkReaderIgnore = XmlReader.Create(fs, xmlSettingsParse)) { var doc = XDocument.Load(xmkReaderIgnore); Console.WriteLine(doc.Root.ToString()); // outputs <sgml>Why couldn't I publish my books directly in standard SGML? - William Shakespeare.</sgml> not <sgml>&question;&signature;</sgml> } fs.Position = 0; string parseXmlString = String.Empty; using (StreamReader sr = new StreamReader(fs)) { for (int i = 0; i < 7; ++i) // Skip DocType sr.ReadLine(); parseXmlString = sr.ReadLine(); } using (XmlReader xmlReaderSkip = XmlReader.Create(new StringReader(parseXmlString),xmlSettingsParse)) { // Prevents Exception "Reference to undeclared entity 'question'" PropertyInfo propertyInfo = xmlReaderSkip.GetType().GetProperty("DisableUndeclaredEntityCheck", BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic); propertyInfo.SetValue(xmlReaderSkip, true, null); var doc2 = XDocument.Load(xmlReaderSkip); // Empty sgml tag } }//using FileStream } }

中添加text-align:center

Fiddle

答案 3 :(得分：0)

您必须text-align: center父div。 text-align: center课程有.brand-logo，仅此一项不会使徽标居中。父母必须将text-align设置为center才能使其内容居中。

Fiddle 

.nav-wrapper {
  margin: 0 auto 0 auto;
  width: 70%;
  height: 100%;
  text-align: center;
}
相关问题
最新问题