如何将我的图标放在div的中间和中间？

Question

我正在尝试将我的图标放在我的div的中间和中心中。 我已尝试text-align:center;和vertical-align: middle;

另外，我不确定为什么我不能将我的文字放在我的右边。

这是我的：Fiddle

我的结果现在：

Answer 1

请注意，vertical-align属性仅适用于内联级元素和表格单元格。

在这种情况下，您可以通过将line-height设置为每个.tl-top和.tl-bot div - 等于其height来对齐中间的图标。

此外，为了将第三个div放入右侧部分，您可以相对于主div放置absolute，然后使用top / {的组合正确对齐它{1}}和left功能。

＆＃13;

＆＃13;

transform: translate()

＆＃13;

.tl-box {
    border:1px solid black;
    width:239px;
    height:80px;
    margin:13.5px;
    position: relative;
}
.tl-box .tl-top {
    width:45px;
    height:39px;
    border-right:1px solid black;
    border-bottom:1px solid black;
    text-align:center;
    font-size:15px;
    color:#4e90cb;
    line-height: 39px;
}
.tl-box .tl-bot {
    width:45px;
    height:40px;
    border-right:1px solid black;
    text-align:center;
    font-size:15px;
    color:#4e90cb;
    line-height: 40px;
}
.tl-box .tl-right {
    width:194px;
    text-align:center;
    position: absolute;
    top: 50%;
    left: calc(50% + 22px); /* where 22px is half of the width of the left box */
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

一种简单的方法是将icon元素设置为table-cells，将divs设置为tables：

i.fa {
   display: table-cell;
   vertical-align: middle;
   /* etc... */
}

.tl-box .tl-top {
  display:table;
  text-align:center;
  /* etc... */ 
} 

.tl-box .tl-bot {
  display:table;
  text-align:center;
  /* etc... */
}

<强> jsFiddle here

---

更新的解决方案

一种稍微好一点的组织方式可能涉及flex，calc等。

jsFiddle here

CSS：

.tl-box {
    border:1px solid black;
    width:239px;
    height:80px;
    margin:13.5px; 
    display:flex;
} 

#left-column { 
    width:30%;
    height:100%;
    border-right:1px solid black;
}

#main-content { 
    width:70%;
    height:100%;
    word-wrap: break-word;
}

.icon-containers {
    height:50%;
    text-align:center;
    font-size:15px;
    color:#4e90cb; 
}

.icon-containers:first-child {
    border-bottom:1px solid black;
}

i.fa {
    position:relative;
    top: calc(50% - 10px);
}

HTML：

<div class="tl-box">
    <div id="left-column">
        <div class="icon-containers"> 
            <i class="fa fa-pencil-square-o"></i>    
        </div>
        <div class="icon-containers"> 
            <i class="fa fa-circle-o"></i>
        </div>
    </div>
    <div id="main-content">
        <div class="tl-right">Put me in the right div</div>
    </div>
</div>