如何使文本居中并保持对齐？

Question

这是我的代码的简化：

 .wrapper{ border: 1px solid gray; width: 30%; margin: 20px auto; } .icon{ text-align: center; } .icon i{ font-size: 100px; color: gray; } .text{ text-align: center; } .text span{ display: block; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="wrapper"> <div class="icon"> <i class="fa fa-home" aria-hidden="true"></i> </div> <div class="text"> <span><i class="fa fa-check-square" aria-hidden="true"></i> Something </span> <span><i class="fa fa-check-square" aria-hidden="true"></i> Something Else </span> <span><i class="fa fa-check-square" aria-hidden="true"></i> Some </span> </div> </div> 

我要做的就是将所有选中图标完全垂直放置在彼此下方。 我怎样才能做到这一点？

Answer 1

使用text-align:left; 而是调整.text的宽度或边距以使其居中

 .wrapper{ border: 1px solid gray; width: 30%; margin: 20px auto; } .icon{ text-align: center; } .icon i{ font-size: 100px; color: gray; } .text{ text-align: left; width: 70%; margin: 0 auto; } .text span{ display: block; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="wrapper"> <div class="icon"> <i class="fa fa-home" aria-hidden="true"></i> </div> <div class="text"> <span><i class="fa fa-check-square" aria-hidden="true"></i> Something </span> <span><i class="fa fa-check-square" aria-hidden="true"></i> Something Else </span> <span><i class="fa fa-check-square" aria-hidden="true"></i> Some </span> </div> </div> 

Answer 2

只需添加text-align:left; 到.text span类。

 .wrapper{ border: 1px solid gray; width: 30%; margin: 20px auto; padding:10px; } .icon{ text-align: center; } .icon i{ font-size: 100px; color: gray; } .text{ text-align: center; } .text span{ display: block; text-align:left; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="wrapper"> <div class="icon"> <i class="fa fa-home" aria-hidden="true"></i> </div> <div class="text"> <span><i class="fa fa-check-square" aria-hidden="true"></i> Something </span> <span><i class="fa fa-check-square" aria-hidden="true"></i> Something Else </span> <span><i class="fa fa-check-square" aria-hidden="true"></i> Some </span> </div> </div> 

Answer 3

我使用ul / li作为您的列表，我认为这更适合您的情况。您可以查看以下版本：

 .wrapper{ border: 1px solid gray; width: 30%; margin: 20px auto; } .icon{ text-align: center; } .icon i{ font-size: 100px; color: gray; } .text{ list-style-type: none; text-align: center; } .text li i{ float: left; } .text span{ display: block; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="wrapper"> <div class="icon"> <i class="fa fa-home" aria-hidden="true"></i> </div> <ul class="text"> <li><i class="fa fa-check-square" aria-hidden="true"></i> <span>Something </span></li> <li><i class="fa fa-check-square" aria-hidden="true"></i> <span>Something Else </span></li> <li><i class="fa fa-check-square" aria-hidden="true"></i> <span>Some </span></li> </ul> </div> 

Answer 4

在div.text使用简单的margin:auto和text-align:left可以实现以下目的：

 .wrapper{ border: 1px solid gray; width: 30%; margin: 20px auto; } .icon{ text-align: center; } .icon i{ font-size: 100px; color: gray; } .text{ text-align: left; margin: auto; width: 70%; } .text span{ display: block; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="wrapper"> <div class="icon"> <i class="fa fa-home" aria-hidden="true"></i> </div> <div class="text"> <span><i class="fa fa-check-square" aria-hidden="true"></i> Something </span> <span><i class="fa fa-check-square" aria-hidden="true"></i> Something Else </span> <span><i class="fa fa-check-square" aria-hidden="true"></i> Some </span> </div> </div> 

Answer 5

flexBox选项。

 .text { display: flex; flex-direction: column; }