Question

我一直在玩弹性盒子，我想把“Logo”测试放在蓝色容器的左上角。

您可以在此处查看：http://codepen.io/TimRos/pen/MwKNgw

* {
    margin: 0;
    padding: 0;
}
.box {
    color: white;
    font-size: 80px;
    text-align: center;
    text-shadow: 4px 4px 3px black;
}


/* COLORS & Style
===================================== */

.main-header    {   background: #e3e3e3;    }
.main-footer    {   background: #e3e3e3;    }
.main-content   {   background: #e3e3e3;    }

.main-wrapper {
    box-shadow: 2px 2px 10px #333;
}


.main-wrapper {
    width: 80%;
    margin: 0 auto;
}

/* HEAD
===================================== */

.main-header {
    width: 100%;
    height: 100px;
    border-bottom: 1px solid black;
}

.main-nav {
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;

}

.main-nav li {
    margin-left: 8px;
    margin-right: 8px;
}

#logo {
    margin-right: auto; /* Align Logo to Left, Nav to the right*/
    margin-left: 0;
    align-self: center;
}

.main-nav li:last-child {
    margin-right: 0;
}

.main-nav li {
    background-color: #3f8abf;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 4px solid firebrick;


}
.main-nav a {
    text-decoration: none;
    color: white;
    text-align: center;
    font-weight: bold;
    padding: 8px 15px;
    display: block;
    width: 100px;
}

#logo {
    border-top-left-radius: 0;
    border-bottom-right-radius: 5px;
    border-bottom: 0;
    border-left: 4px solid firebrick;
    padding: 0;
    height: 100%;

}

#logo h1 {
    padding: 0;
    margin: 0;
}


/* CONTENT
===================================== */

.main-content {
    padding: 15px;
}
h3 {
    margin-bottom: 15px;
}

/* FOOTER
===================================== */

.main-footer {
    border-top: 1px solid black;
    text-align: center;
    padding: 5px;
}

我尝试了自动边距和填充，但这似乎不起作用，请帮忙！

Answer 1

只需添加此CSS：

<强> CSS

#logo a{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%); // For Safari and Chrome Mobile
}

<强> DEMO HERE

Answer 2

我做了一些研究，发现了另一个解决这个问题的方法。因为我已经使用了flexbox，不妨使用像这样的flexbox：

#logo {
  display: flex;
  align-items: center
}

正如我所说，另一种解决方案效果很好。

无序列表元素（flexbox）中的中心链接

2 个答案: