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

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类。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我使用ul / li作为你的清单，我认为在你的情况下它更合适 您可以查看此版本：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

在margin:auto中使用简单的text-align:left和div.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;
  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选项。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;