如何使用Bootstrap 4將文本垂直置於「col-sm-12」內？

我試圖讓文字在整個黃色空間內垂直居中。正如他們的文檔中所建議的那樣，我一直試圖在行上實現「align-items-center」，以及「my-auto」類。我不知道我做錯了什麼。如何使用Bootstrap 4將文本垂直置於「col-sm-12」內？

#heading-cont { 
 
    background-color: #F7CE38; 
 
    height: 10rem; 
 
} 
 

 
.white { 
 
    color: white; 
 
} 
 

 
.title { 
 
    font-family: 'Montserrat', Arial, sans-serif; 
 
    text-transform: uppercase; 
 
    font-weight: 300; 
 
} 
 

 
.description { 
 
    font-family: 'Pathway Gothic One', Arial, sans-serif; 
 
    font-weight: 400; 
 
    text-transform: uppercase; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section class="header"> 
 
    <div class="container-fluid" id="heading-cont"> 
 
    <div class="row"> 
 
     <div class="col-sm-12 my-auto"> 
 
     <h1 class="title white text-center">Digital</h1> 
 
     <h4 class="description white text-center">This is the description.</h4> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

CodePen Demo

來源

2017-10-10 mina cosentino

（我假設你的意思是「垂直居中」;因爲有您的示例中只有一列，沒有什麼與對齊）

container-fluid在Bootstrap中分配的最小高度爲10rem。垂直居中你的文字，你需要拉伸row與之匹配：

#heading-cont > .row { 
    height: 100%; 
}

來源

2017-10-10 18:58:17 Blazemonger

你是對的。對不起，仍然是初學者。這工作完美雖然！非常感謝。一旦允許我這樣做，將會標記爲正確。 –

你需要給該行的100％的高度，這樣有房居中文本

.row { 
    height: 100%; 
}

來源

2017-10-10 18:58:47 Kaune

你可以（在我的例子.x）添加一個類#heading-cont，並應用以下CSS來它，使之成爲Flexbox的容器和垂直居中其內容：

.x { 
    display:flex; 
    flex-direction: column; 
    justify-content: center; 
}

https://codepen.io/anon/pen/GMdazJ

來源

2017-10-10 19:02:08 Johannes

首先，用bootstrap 4類，如他們的意思來使用：類=「d-FLEX柔性柱證明內容中心」，然後你不需要高度增加該行。如果不需要，不要單獨重複現有的實用程序類來制定獨立的css規則。

/*containers*/ 
 

 
.container-fluid { 
 
    padding: 0; 
 
} 
 

 
#heading-cont { 
 
    background-color: #F7CE38; 
 
    height: 10rem; 
 
} 
 

 
#subheading { 
 
    height: 8rem 
 
} 
 

 
#heading-cont > .row { 
 
/* height: 10rem;*/ 
 
} 
 

 
#subheading > .row { 
 
    /*height: 100%;*/ 
 
} 
 

 
/*type + color*/ 
 

 
h1 { 
 
    font-size: 3rem !important; 
 
} 
 

 
h3 { 
 
    font-size: 2rem !important; 
 
} 
 

 
.white { 
 
    color: white; 
 
} 
 

 
.margin-b { 
 
    margin-bottom: 2rem; 
 
} 
 

 

 
.title { 
 
    font-family: 'Montserrat', Arial, sans-serif; 
 
    text-transform: uppercase; 
 
    font-weight: 300; 
 
} 
 

 
.description { 
 
    font-family: 'Pathway Gothic One', Arial, sans-serif; 
 
    font-weight: 400; 
 
    text-transform: uppercase; 
 
} 
 

 
/*social-prof*/ 
 

 
.box { 
 
    background-color: #E0E0E0; 
 
    height: 20rem; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section class="header"> 
 
    <div class="container-fluid d-flex flex-column justify-content-center" id="heading-cont"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <h1 class="title white text-center">Digital</h1> 
 
     <h3 class="description white text-center">This is the description.</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 

 
<section class="social-prof"> 
 
    <div class="container-fluid d-flex flex-column justify-content-center" id="subheading"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <h1 class="title text-center">Branding</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="container-fluid" id="bu"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="box"> 
 
      <div class="layer"> 
 
      <h3 class="description white text-center margin-b">Small Business Services</h3> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

https://codepen.io/anon/pen/oGyrPg

來源

2017-10-11 21:43:11 WebDragon

如何使用Bootstrap 4將文本垂直置於「col-sm-12」內？

回答

相關問題