0

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 :

enter image description here

Terry
  • 63,248
  • 15
  • 96
  • 118
code-8
  • 54,650
  • 106
  • 352
  • 604

2 Answers2

3

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>
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • Finally someone get my point ! Do you mind explain what you modified a little bit ? Rather than that, you owned this question. I'll make sure to accept when the timer is up. Thank you. – code-8 Mar 31 '15 at 23:49
  • It's precisely clear. I'm trying to learn them right now. Especially, my right div one ? Why is my situation is so complicated just to put a text inside my right div ? Again, I am just curious. – code-8 Mar 31 '15 at 23:59
  • @rangerover.js Actually, there are couple of ways to achieve that layout. I just wanted to keep the current markup untouched. E.g. If the sizes are fixed, we could place the text into the main element and also add a proper padding-left to it and then position the left boxes `absolute`ly in proper positions at the left side. – Hashem Qolami Apr 01 '15 at 00:07
  • 1
    @rangerover.js However, for the right div and the technique I've used, an explanation can be found [here](http://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element/25776315#25776315). – Hashem Qolami Apr 01 '15 at 00:08
2

A simple way could be to set the icon elements to be table-cells and the containing divs as 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

Updated Solution

A slightly nicer way of organizing this could involve flex, calc etc.

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>
dsgriffin
  • 66,495
  • 17
  • 137
  • 137