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

Question

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

此外，我不确定为什么我不能将文字放在我的右侧 div。

这是我的：Fiddle

我现在的结果：

Answer 1

请注意 vertical-align 属性仅适用于行内元素和 table 单元格。

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

此外，为了将第三个 div 放入正确的部分，您可以相对于主 div 定位在 absolutely 中，然后使用top/left 和 transform: translate() 函数的组合。

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="tl-box">
    <div class="tl-top"> <i class="fa fa-pencil-square-o"></i>

    </div>
    <div class="tl-bot"> <i class="fa fa-circle-o"></i>

    </div>
    <div class="tl-right">
        Put me in the right div
    </div>
</div>

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>

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

How can I place my icon in the middle and center of my div?

html

css

icons

center

更新解决方案