Align div vertically in Internet Explorer 11

Question

I’m studying css and challenged myself to create a reproduction of an image that follows below:

I was able to do something similar, but I could not work the same way in Internet Explorer, I saw some examples using display: table and position: relative but I did not succeed in a crossbroser view (exactly in Internet Explorer 11).

Below is the preview image in Internet Explorer 11 (Windows Seven Professional):

Note: my problem is in the vertical alignment of balls 3 and 4.

I believe the problem is in relation to the structure of my HTML.

Just follow my example:

* {
        margin: 0px;
        padding: 0px;
    }
    
    .main {
/*         background-color: #bebebe; */
        width: 500px;
        height: 100%;
        margin: auto;
    }
    
    .row {
        width: 100%;
/*         border: 2px solid #000; */
        text-align: center;
    }
    
  

    
    .main .mini-ball {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: red;
        display: inline-block;
    }    
    
    .row .mini-ball-top-left {
        background-color: #c5e9ad;
    }    
    
    .row .mini-ball-top-right {
        background-color: #b2dcf9;
    } 
    
    .row .mini-ball-middle-left {
        background-color: #e45e47;
        margin-right: 40px
    } 
    
    .row .mini-ball-middle-right {
        background-color: #e45e47;
        margin-left: 40px
    } 
    
    .row .mini-ball-bottom-left {
        background-color: #b2dcf9;
    } 
    
    .row .mini-ball-bottom-right {
        background-color: #c5e9ad;
    }    
    
    .row .mini-ball-top-right,
    .row .mini-ball-top-left {
        margin: 0px 40px -20px;
    }   
    
    .mini-ball-bottom-right,
     .mini-ball-bottom-left {
        margin: -80px 40px;
        position: relative;
         top: -20px
    }    
    
    .main .main-ball {
        width: 100px;
        height: 100px;
        margin: auto;
        background-color: #2171af;
        border-radius: 50%;
        display: inline-block;
    }  

    .main .main-ball .content {
        font-weight: bold;
        color: #fff;
        font-size: 16px;
        font-family: arial, sans-serif;
        text-align: center;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }   
    
    .row .align-vertical {
        position: relative;
        top: 50%;
        transform: translateY(50%);
    }

<div class="main">
     <div class="row">
         <div class="mini-ball mini-ball-top-left">1</div>
         <div class="mini-ball mini-ball-top-right">2</div>
     </div>
     <div class="row">
         <div class="mini-ball mini-ball-middle-left align-vertical">3</div>
         <div class="main-ball">
            <div class="content">Intranet</div>
         </div>
         <div class="mini-ball mini-ball-middle-right align-vertical">4</div>
     </div>
     <div class="row">
         <div class="mini-ball mini-ball-bottom-left">5</div>
         <div class="mini-ball mini-ball-bottom-right">6</div>
     </div>
 </div>

Example generated in codepen: http://codepen.io/adrianoavelino/pen/rLMVWb?editors=1100

What is the best HTML structure or technique to achieve this vertical alignment?

Answer 1

Within the element: <div class="mini-ball mini-ball-top-left">1</div>

I added a new div that will contain her content, getting like this: <div class="mini-ball mini-ball-top-left"><div class="conteudo">1</div></div>

Now to function properly just add the position:relative; in class .mini-ball and create the copy of the class CSS .content.

Follow him down:

.main .mini-ball .conteudo {
  width:100%;
  text-align:center;
  position:relative;
  top:50%;
  transform:translateY(-50%);  
}