如何使用flexbox在页面顶部对齐此徽标？

时间：2017-10-10 05:36:06

标签： html css css3 flexbox

enter image description here

您好， 我想要徽标＆＃39; Abyk Deco＆＃39;保持在页面顶部，但它现在与两个标题文本一起居中。如何使用flexbox在顶部对齐？我试过这段代码。

<body>
<div class="banner">
    <div class="logo">
        <h1><a href="#">Abyk<span id="red">Deco<span></a></h1>
    </div>

    <div class="heading">
        <h1>ABYK DECO</h1>
        <h4>We make your dream home come true!</h4>
    </div>

</div>

CSS：

    .banner{
    height: 100%;
    background-image: url(../img/1.jpeg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;  
    flex-direction: column;
    align-items: center;
    justify-content: center;
}  

.logo{
    color: #fff;
    font-size: 2em;
    font-family: 'Oswald', sans-serif;
    align-items: flex-start;
    justify-content: center;
}   

.logo a{
    color: #fff;
}

#red{
    color: red;
}

.heading{
    font-family: 'PT Sans', sans-serif;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.heading h1{
    font-size: 4.5em;
}

.heading h4{
    font-size: 2em;
}

当标题文字保留在中心时，如何将徽标与顶部对齐？我更喜欢使用flexbox来解决这个问题。谢谢。

6 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
library(zoo)
w1 <- sin(seq(0,20,0.25))
w2 <- cos(seq(0,20,0.25))
w3 = w1*2
w4 = w2*0.5
w5 = w1*w2
w6 = w2^2

df <- data.frame(w1,w2,w3,w4,w5,w6, stringsAsFactors = FALSE)
names(df) <- paste("waves", 1:6, sep="")
waves <- zoo(df)

lookup <- data.frame(index = paste("waves", 1:6, sep=""),
                     group = c("healthy", "unhealthy"),
                     stringsAsFactors = FALSE)
＆＃13; 
.container{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: flex-start;
  background-color: gray;
}

.logo{
  width: 200px;
  height: 200px;
  background-color: red;
}
＆＃13;
＆＃13;
＆＃13;

尝试使用它。

答案 1 :(得分：1)

此处能够将logo放在顶部并且heading位于视口中心的主要技巧是使用::after伪元素来匹配{{1然后添加此规则并通过将 flex-grow 设置为1并将 flex-basis 设置为0来使它们等于高

logo

Stack snippet

＆＃13;
＆＃13; 
.logo, .heading, .banner::after {
  content: '';                      /*  for the pseudo to render  */
  flex: 1 1 0;                      /*  grow/shrink equal based on zero content  */
}
＆＃13; 
html, body {
  height: 100%;
  margin: 0;
}
.banner {
  height: 100%;
  background-image: url(http://placehold.it/300x100/555);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  color: #fff;
  font-size: 2em;
  font-family: 'Oswald', sans-serif;
}

.logo a {
  color: #fff;
}

#red {
  color: red;
}

.heading {
  font-family: 'PT Sans', sans-serif;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.heading h1 {
  font-size: 4.5em;
  margin: 0;                        /*  remove default margin  */
}

.heading h4 {
  font-size: 2em;
  margin: 0;                        /*  remove default margin  */
}

.logo, .heading, .banner::after {
  content: '';                      /*  for the pseudo to render  */
  flex: 1 1 0;                      /*  grow/shrink equal based on zero content  */
}
＆＃13;
＆＃13;
＆＃13;

如果<div class="banner"> <div class="logo"> <h1><a href="#">Abyk<span id="red">Deco</span></a></h1> </div> <div class="heading"> <h1>ABYK DECO</h1> <h4>We make your dream home come true!</h4> </div> </div>位于左侧空间的中心（heading和页面底部之间），请使用logo上的自动边距

＆＃13;
＆＃13; 
heading
＆＃13; 
html, body {
  height: 100%;
  margin: 0;
}
.banner {
  height: 100%;
  background-image: url(http://placehold.it/300x100/555);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  color: #fff;
  font-size: 2em;
  font-family: 'Oswald', sans-serif;
}

.logo h1 {
  margin-bottom: 0;                 /*  remove default margin  */
}

.logo a {
  color: #fff;
}

#red {
  color: red;
}

.heading {
  font-family: 'PT Sans', sans-serif;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto 0;
}

.heading h1 {
  font-size: 4.5em;
  margin: 0;                        /*  remove default margin  */
}

.heading h4 {
  font-size: 2em;
  margin: 0;                        /*  remove default margin  */
}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

将align-items更改为flex-start 

.banner{
    height: 100%;
    background-image: url(../img/1.jpeg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;  
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

答案 3 :(得分：0)

从banner类中删除以下样式。

justify-content: center;
align-items: center;

将以下样式添加到logo类

align-items: center;
justify-content: center;
display: flex;


body {
  margin: 0
}

.banner {
  height: 100%;
  background-image: url('https://images.designtrends.com/wp-content/uploads/2015/11/06084012/Dark-Brown-Bricks-Backgroud.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
}

.logo {
  color: #fff;
  font-size: 2em;
  font-family: 'Oswald', sans-serif;
  align-items: center;
  justify-content: center;
  display: flex;
}

.logo a {
  color: #fff;
}

#red {
  color: red;
}

.heading {
  font-family: 'PT Sans', sans-serif;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.heading h1 {
  font-size: 4.5em;
}

.heading h4 {
  font-size: 2em;
}
<div class="banner">
  <div class="logo">
    <h1><a href="#">Abyk<span id="red">Deco<span></a></h1>
  </div>

  <div class="heading">
    <h1>ABYK DECO</h1>
    <h4>We make your dream home come true!</h4>
  </div>
</div>

答案 4 :(得分：0)

尝试将flex-grow: 1;添加到.heading，将align-self: center;添加到.logo，然后从margin-top删除.logo H1（可选）

HTML：

<div class="banner">
  <div class="logo">
      <h1><a href="#">Abyk<span id="red">Deco<span></a></h1>
  </div>

<div class="heading">
    <h1>ABYK DECO</h1>
    <h4>We make your dream home come true!</h4>
</div>

CSS：

.banner{
   height: 100%;
   min-height: 100vh;
   background-image: url(../img/1.jpeg);
   background-size: cover;
   background-position: center top;
   background-repeat: no-repeat;
   background-attachment: fixed;
   display: flex;  
   flex-direction: column;
 }  

.logo {
  color: #fff;
  font-size: 2em;
  font-family: 'Oswald', sans-serif;
  align-self: center; /*added*/
}   

 .logo a{
   color: #fff;
 }

 .logo H1 { /*added*/
   margin-top: 0;
}

#red{
   color: red;
}

.heading {
   font-family: 'PT Sans', sans-serif;
   color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   flex-grow: 1; /*added*/
}

.heading h1{
  font-size: 4.5em;
}

.heading h4{
  font-size: 2em;
}
JSFiddle上的

flood-fill

答案 5 :(得分：0)

诀窍是将margin: 0 auto auto auto;添加到.logo和.heading

P.S。我已尽量减小字体大小，以便您可以在代码段中正确查看预览，或者只是在全屏幕上查看预览

＆＃13;
＆＃13; 
html{
  height:100%;
}
body{
  background:grey;
  height:100%;
}
.banner{
    height: 100%;
    background-image: url(../img/1.jpeg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;  
    flex-direction: column;
    align-items: center;
    justify-content: center;
}  

.logo{
    color: #fff;
    font-size: .9em;
    font-family: 'Oswald', sans-serif;
    margin: 0 auto auto auto;

}   

.logo a{
    color: #fff;
}

#red{
    color: red;
}

.heading{
    font-family: 'PT Sans', sans-serif;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto auto auto;
}

.heading h1{
    font-size: 2em;
    margin: 0;
}

.heading h4{
    font-size: 1.3em;
}



.logo h1 {
    margin: 0;
}

.heading h1 {
    margin-bottom: 0;
}
＆＃13; 
<div class="banner">
    <div class="logo">
        <h1><a href="#">Abyk<span id="red">Deco<span></a></h1>
    </div>

    <div class="heading">
        <h1>ABYK DECO</h1>
        <h4>We make your dream home come true!</h4>
    </div>

</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题