logo标签列表

CSS中div无法居中

htmlcss
3

我一直在这个网站上寻找解决此问题的答案，但没有一个有效或者我已经在我的代码中使用了给出的答案。以下是我的代码：

@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的元素无法居中。我已经为它设置了宽度，确保它不是块级元素，并添加了margin代码并将其设置为auto。为什么还是无法实现居中？

5
如果你剔除所有不必要的代码，就能够使回答者和未来的读者更容易理解。创建一个最简例子，仍然展示问题，也有助于你找到问题的原因。 - Woodrow Barlow
3
不确定是否需要提供JSFiddle，因为OP已经提供了一个堆栈片段。 - Hidden Hobbes
答案不是将父级（容器）进行文本对齐。 - Joseph Casey
@woodrowbarlow 我知道我应该简化我的代码，但它看起来很漂亮，让人们看不到它会很遗憾。此外，如果我一开始就将其简化到我想要的程度，答案是找不到的。 - Andrew Robinson
4个回答
4

您的标志位于span中心，但您的span并不是导航栏的全宽。将您的标志移至新的带有绝对定位的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>`

一个简单的理解方法是通过插入这个 <span class="brand-logo text-center">logo<br/>..</span>。 - Joseph Casey
3

你的CSS父元素缺少一个分号。修复这个问题并添加text-align:center;对我有用。试试这个。

.nav-wrapper {
    margin: 0 auto 0 auto;
    width: 70%;
    height: 100%;
    text-align: center;
}
他确实漏了一个分号，但那不是他遇到的问题。 - Joseph Casey
1
我在我的回答中解决了具体的问题，但我认为缺少分号值得一提。 - Michael Podrybau
谢谢啊，我发誓我的不耐烦总是让我失控。感谢你的帮助！我只是在nav-wrapper中添加了text-center类，现在一切都正常了。谢啦！ - Andrew Robinson
Joseph: 它起作用了。分号不是我的问题，但我想要清晰的代码，所以这是值得的。 - Andrew Robinson
将text-align添加到父div是屠夫块方法。他应该为他的子元素定义宽度。 - Joseph Casey
为子元素添加自动左右边距，并将text-align:center应用于父元素，可以确保该元素在所有现代浏览器中居中显示。我还没有找到其他总是有效的方法，因此这是我首选的解决方案。如果您的网站具有任何类型的动态内容，则有时可能不希望定义元素的宽度。 - Michael Podrybau
1
在 .nav-wrapper 中添加 text-align:center。

Fiddle

Fiddle中的标志似乎没有居中。 - Brino
0
你必须将父级 div 的 text-align: center。你已经为 .brand-logo 类设置了 text-align: center，但这样做并不能使标志居中。必须将父级的 text-align 设置为 center 才能使其内容居中。

Fiddle

.nav-wrapper {
  margin: 0 auto 0 auto;
  width: 70%;
  height: 100%;
  text-align: center;
}
如果他想对齐菜单按钮，对齐父级div可能有效。但他只想对齐标志。解决方案是正确使用网格布局。他的子元素没有定义宽度。解决方案是为子元素添加定义的宽度。 - Joseph Casey
@JosephCasey，请尝试从.nav-wrapper中删除text-align: center，看看它是否会影响按钮。 更新：原帖作者刚刚证明了您是正确的。感谢您的贡献。 - chiapa
不确定为什么会被扣分？您的答案是正确的！ - Aaron
@Chiapa，你还是没有理解重点。他正在浮动菜单对象。你可以通过不正确的方式使用CSS来使其看起来正确。在将CSS扩展到企业生产规模之前，这样做都没问题。你的解决方案是一种贫民窟的黑客行为，不应该被实践，因为这是对CSS工作原理的基本误解。 - Joseph Casey
@JosephCasey，OP接受并解释了他所使用的解决方案。 你在说这些不是正确的答案，我相信你知道更好的方法。 你知道你可以做什么而不是对所有其他答案进行投票吗？ 你可以自己想出一个比其他人更好的答案：我会在这里为它点赞。 - chiapa
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接