为什么现代对齐方法都没有适用于此标记？

时间：2016-12-17 14:39:00

标签： html css

我目前正在处理网页... 

.content {
  background-color: #BAC9FF;
  height: 100vh;
}
.navbar {
  height: 10vh;
  background-color: white;
  display: block;
}
.title {
  font-family: arial;
  font-size: 3vh;
  display: inline-block;
  padding-left: 1vw;
  margin-top: 3vh;
}
.logo {
  display: inline-block;
  vertical-align: middle;
}
<div class="content">
  <div class="navbar">
    <div class="title">
      我的 DICTIONARY
    </div>
    <div class="logo">
      <img src="logo.png" width="60" height="50">
    </div>
  </div>
</div>

我尝试应用“margin-left: auto; margin-right: auto”等多种技术，并尝试将其更改为“阻止”并使用display:absolute强制将导航栏元素放置到位。然而，无济于事，我无法做到。有没有建议将我的页面从当前转换...

Current

To，我的模型（如您所见，徽标居中）：

Mock-up

4 个答案:

答案 0 :(得分：2)

你可以使用flex并最终重新思考结构：

header,
header div,
header nav {
  display: flex;
  justify-content: space-between;/* push things appart from edge to edge */
  box-sizing:border-box;
}
header div {
  width: calc(50% + 60px - 1em);/* 50% + width of image - padding */
}
header nav {
  flex: 1;
  justify-content: flex-end; 
  flex-wrap:wrap;
}
header> * > * {
  margin: auto 1em;/* vertical align(same as align-items: center + margin-left&right : 1em */
}
header {/* makup to see its center */
  padding: 1em;
  background: linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to left, transparent 50%, rgba(0, 0, 0, 0.2) 50%)
}
img {
  border-radius: 50%;
  box-shadow: 0 0 0 2px;
  opacity: 0.5
}
<header>
  <div>
    <a href="#">link</a>
    <img src="http://dummyimage.com/60x40&text=logo" />
  </div>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact Us</a>
  </nav>
</header>

您也可以使用display：table来支持旧浏览器（例如IE8）：

header,
header div,
header nav {
  box-sizing:border-box;
}
header {
  display:table; 
  width:100%;
  table-layout:fixed;
}
header div ,
header nav {
  display:table-cell;
  vertical-align:middle;
  text-align:justify;
}
header > :after,
header > :before{
  content:'';
  display:inline-block;
  width:99%;
  
}
header > nav {
  text-align:right;
  padding-left:40px;
}
header> * > * {
  vertical-align:middle;
}
header {/* makup to see its center */
  padding:0  1em;
  background: linear-gradient(to top, transparent 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to left, transparent 50%, rgba(0, 0, 0, 0.2) 50%)
}
img {
  border-radius: 50%;
  box-shadow: 0 0 0 2px;
  opacity: 0.5;
  margin-right:-30px;
}
nav a {
  display:inline-block;
  text-align:center;
  max-width:30%;
  margin:0 1em;
}
<header>
  <div>
    <a href="#">link</a>
    <img src="http://dummyimage.com/60x40&text=logo" />
  </div>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact Us</a>
  </nav>
</header>

两种技术都允许vertical-align内容（这似乎是你的问题）并且很容易将它们喷在里面 注意text-align:justify +伪来模仿来自justify-content:space-between的{​​{1}}。

答案 1 :(得分：1)

您需要从徽标中删除display:inline-block属性，将您的css更新为

.content {
        background-color: #BAC9FF;
        height: 100vh;
    }

    .navbar {
        height: 10vh;
        background-color: white;
        display: block;
    }

    .title {
        font-family: arial;
        font-size: 3vh; 
        padding-left: 1vw;
        margin-top: 3vh;
    }

    .logo {
       margin-left:50%;
       margin-right:50%;
    }

您可能仍希望调整标题类以控制标题div元素的宽度，以防止div跨越页面的整个宽度，但此更改将使徽标居中。

答案 2 :(得分：1)

另一种无缝工作的方式是以left和transform: translateX()属性为中心：

.logo {
  position: absolute;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

此外，如果您还要将元素垂直居中，请对top和translateY()

执行相同操作 
.logo {
  position: absolute;
  display: inline-block;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

优点：

  • 无需知道元素的宽度或高度。
  • 元素将始终根据其父
    • 居中

缺点：

  • IE8及以下版本以及Opera Mini的所有版本均不支持。

一些注意事项：

  • 要居中的元素的父级需要具有非静态position属性（例如relative，absolute，fixed）。
  • 除非您在另一条规则中覆盖div，否则不需要display: block替换div。 This attribute is initially set to block for divs.
  • 使用vh调整某些元素（例如，导航栏）通常不是一个好主意。各种宽高比看起来会有很大不同 - 想想笔记本电脑的16：9和移动设备的9:16（肖像）。使用em，rem或px代替保留任何屏幕尺寸的方面。

另一个解决方案是使用flexbox（如@GCyrillus'答案中所述），但这也将删除与IE9的兼容性。 IE10和11也报告了大量的错误。

请参阅CanIUse page for flexbox。

以下是包含更改后代码的代码段。

.content {
  background-color: #BAC9FF;
  height: 100vh;
}
.navbar {
  height: 10vh;
  background-color: white;
  position: relative;
}
.title {
  font-family: arial;
  font-size: 3vh;
  display: inline-block;
  padding-left: 1vw;
  margin-top: 3vh;
}
.logo {
  position: absolute;
  display: inline-block;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
<div class="content">
  <div class="navbar">
    <div class="title">
      我的 DICTIONARY
    </div>
    <div class="logo">
      <img src="logo.png" width="60" height="50">
    </div>
  </div>
</div>

答案 3 :(得分：1)

我会重新构建html，将div元素更改为span 

<div class="content">
  <div class="navbar">
    <span class="title">
      我的 DICTIONARY
    </span>
    <span class="logo">
      <img src="logo.png" width="60" height="50">
    </span>
  </div>
</div>

然后在css 

.content {
  background-color: #BAC9FF;
  height: 100vh;
}
.navbar {
  height: 10vh;
  background-color: white;
  position: relative;
}
.title {
  font-family: arial;
  font-size: 3vh;
  padding-left: 1vw;
  margin-top: 3vh;
}
.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

here is a working jsfiddle

相关问题
最新问题