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

Question

I am trying to place my icon in the middle and center of my div. I've tried text-align:center;, and vertical-align: middle;

Also, I'm not sure why I can't place my text inside my right div.

Here is my : Fiddle

My result now :

Answer 1

Note that vertical-align property is only applicable to inline-level elements and table-cells.

In this case, you could align the icons at the middle by setting a line-height to each .tl-top and .tl-bot divs — equal to their heights.

Also, in order to put the third div into the right section, you could position in absolutely, relative to the main div and then align it properly by using a combination of top/left and transform: translate() function.

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