如何将内容与容器中间对齐引导程序

-1

我想将卡对齐到容器的中间（垂直和水平），但使用文本对齐或垂直对齐似乎不起作用。如何将内容与容器中间对齐引导程序

.container-fluid { 
 
    text-align: center; 
 
} 
 

 
.card { 
 
    border: 1px solid #000; 
 
    width: 60%; 
 
    padding: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
     <div class="card"> 
 
      <div class="card-block"> 
 
       <p class="card-text"> 
 
        "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." 
 
       </p> 
 
      </div> 
 
     </div> 
 
    </div>

来源

2017-04-19 coffeeak

值得庆幸的是，Flexbox，就可以很容易地中心内容！您可以根据需要调整容器的高度和宽度。我只用width: 100%;和height: 500px;进行测试。试试下面的代码：

.container-fluid { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 500px; 
 
    width: 100%; 
 
} 
 

 
.card { 
 
    text-align: center; 
 
    border: 1px solid #000; 
 
    width: 60%; 
 
    padding: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
     <div class="card"> 
 
      <div class="card-block"> 
 
       <p class="card-text"> 
 
        "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." 
 
       </p> 
 
      </div> 
 
     </div> 
 
    </div>

来源

2017-04-19 00:54:28 Kellen

如何将内容与容器中间对齐引导程序

回答

相关问题