如何在br文本的左侧垂直对齐字体真棒图标

Question

我的图标左侧带有数字列表

<div>
    <i id=ico class='icon icon-2x icon-phone'></i>
    <span class="text">123-4567-890</span> <br>
    <span class="text">123-4567-890</span> <br>
    <span class="text">123-4567-890</span>
</div>

这是CSS

div {
    border: 1px solid #ccc;
    display: inline-block;
    margin: 60px;
    padding: 4px;
}
.text {
  margin-left: 15px;
}

#ico {
    vertical-align: middle;
}

但是，我得到了这个结果，

而且，我想使用CSS实现此结果。将图标放在数字旁边。

这是我的jsfiddle-> http://jsfiddle.net/F3KyK/1224/

Answer 1

这可以通过flexbox完成：

.container {
  display: flex;
  align-items: center;
  margin: 40px;
  padding: 4px;
}
.text {
  margin-left: 15px;
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"/>

<div class='container'>
    <i id=ico class='icon icon-2x icon-phone'></i>
    <div class="list">
      <span class="text">123-4567-890</span> <br>
      <span class="text">123-4567-890</span> <br>
      <span class="text">123-4567-890</span>
    </div>
</div>

Answer 2

display: flex属性对您有用。

http://jsfiddle.net/Sampath_Madhuranga/F3KyK/1264/

div.wrapper {
    display: flex;
    align-items: center;
    padding: 4px;
}
.text {
  margin-left: 15px;
}

/* #ico {
    vertical-align: middle;
} */

.icon-box {
  
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"/>

<div class="wrapper">
    <i id=ico class='icon icon-2x icon-phone'></i>
    <div class="icon-box">
      <span class="text">123-4567-890</span>         <br>
      <span class="text">123-4567-890</span>         <br>
      <span class="text">123-4567-890</span>
    </div>
</div>

Answer 3

您可以将电话号码范围包裹在一个div中，然后给该div和图标display: table-cell：

div {
  display: inline-block;
  margin: 40px;
  padding: 4px;
}

.text {
  margin-left: 15px;
}

#ico {
  vertical-align: middle;
  display: table-cell;
}

div>div {
  display: table-cell;
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"/>
<div>
  <i id=ico class='icon icon-2x icon-phone'></i>
  <div>
    <span class="text">123-4567-890</span> <br>
    <span class="text">123-4567-890</span> <br>
    <span class="text">123-4567-890</span>
  </div>
</div>