Question

我看过this的答案和一些类似的答案，但仍然在努力调整。

我在父div中有3个div。每个div都有一个字体很棒的图标和文字。目前，对齐方式水平均匀，但文本和图标之间有间隙。我需要图标旁边的每个div文字。

我有什么：

[  icon     text     icon     text     icon     text  ]

我需要什么：

[    icon text         icon text         icon text    ]

代码：

＆＃13;

.question-instructions {
  background-color: #3eb6a9;
  margin: 0px 0px 0px;
}

.question-line {
  margin: 0px auto;
  white-space: nowrap;
  text-align: center;
}

.question-block {
  margin: 10px 0 30px;
  align-content: center;
  vertical-align: middle;
  /*display: inline-block; */
}

.block1 {
  /* float: left;*/
}

.block2 {
  /*display:inline-block;*/
}

.block3 {
  /*float: right;*/
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="question-instructions">
      <div class="row text-center">
        <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 ">
          <h2>MY TITLE</h2>
        </div>
      </div>
      <div class="row question-line">
        <div class="col-lg-4 col-md-4 col-sm-4 question-block block1">
          <div class="pull-left"><i class="fa fa-group fa-fw fa-3x question-icon"></i>
          </div>
          <h4>My first text</h4>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-4 question-block block2">
          <a class="pull-left" href="#">
            <i class="fa fa-question fa-fw fa-3x question-icon"></i>
          </a>
          <h4 class="">My second text</h4>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-4 question-block block3">
          <div class="pull-left"><i class="fa fa-graduation-cap fa-fw fa-3x question-icon"></i>
          </div>
          <h4>My third text</h4>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

我试过了：

向左侧和右侧添加浮动到两端的div并切换html，使得浮点数先是然后是中心。没有工作。
如果我从text-align: center中删除了.question-line css属性，那么文本对应图标应该如何，但是所有内容都在父div中保持对齐而不居中。我明白了：

[图标文字图标文字图标文字]
我尝试过显示：图标上的表格单元格和h4。也没有用。

Answer 1

这是更新的代码。 text-align成功了。检查“整页”模式以查看效果。 http://i.imgur.com/KAYkTMp.png

.question-instructions {
  background-color: #3eb6a9;
  margin: 0px 0px 0px;
  width: 100%;
}

.question-line {
  margin: 0px auto;
  white-space: nowrap;
  text-align: center;
}

.question-block {
  margin: 10px 0 30px;

  vertical-align: middle;
  white-space: nowrap; 

}

.block1 {
  /* float: left;*/
}

.block2 {
  /*display:inline-block;*/
}

.block3 {
  /*float: right;*/
}

<div class="container">
  <div class="row">
<div class="question-instructions">
  <div class="row text-center">
    <div class="col-lg-12 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 ">
      <h2>MY TITLE</h2>
    </div>
  </div>
  <div class="row question-line">


    <div class="col-lg-4 col-md-4 col-sm-4 question-block block1">
      <div style="display: inline-block;">
        <i class="fa fa-group fa-fw fa-3x question-icon pull-left"></i>
        <h4 class="pull-left">My first text</h4>
      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4 question-block block2">
      <div style="display: inline-block;">
        <i class="fa fa-question fa-fw fa-3x question-icon pull-left"></i>
        <h4 class="pull-left">My second text</h4>
      </div>
  
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4 question-block block3">
      <div style="display: inline-block;">
        <i class="fa fa-graduation-cap fa-fw fa-3x question-icon pull-left"></i>
        <h4 class="pull-left">My third text</h4>
      </div>
    </div>


  </div>
</div>
  </div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Answer 2

我在您的代码中进行了一些更改，请参阅下面的代码：

＆＃13;

.question-instructions {
  background-color: #3eb6a9;
  margin: 0px 0px 0px;
}



.question-line {
  margin: 0px auto;
  white-space: nowrap;
  text-align: center;
}

.question-block {
  margin: 10px 0 30px;
  align-content: center;
  vertical-align: middle;
  /*display: inline-block; */
}

.block1 {
  /* float: left;*/
}

.inline-block {
  display: inline-block;
}

.block3 {
  /*float: right;*/
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="question-instructions">
      <div class="row text-center">
        <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 ">
          <h2>MY TITLE</h2>
        </div>
      </div>
      <div class="row question-line">
        <div class="col-lg-4 col-md-4 col-sm-4">
          <i class="fa fa-group fa-fw fa-3x question-icon"></i>
          <h4 class="inline-block">My first text</h4>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-4 ">
          <i class="fa fa-question fa-fw fa-3x question-icon"></i>
          <h4 class="inline-block">My second text</h4>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-4 ">
          <i class="fa fa-graduation-cap fa-fw fa-3x question-icon"></i>
          <h4 class="inline-block">My third text</h4>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

检查this小提琴。

<强> CSS

array

将3个div与其图标水平对齐

3 个答案: