Align div vertically in Internet Explorer 11

Question

Align div vertically in Internet Explorer 11

Navigation

#1 by (1 votes)

3

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

Iwasabletodosomethingsimilar,butIcouldnotworkthesamewayinInternetExplorer,Isawsomeexamplesusingdisplay:tableandposition:relativebutIdidnotsucceedinacrossbroserview(exactlyinInternetExplorer11).

BelowisthepreviewimageinInternetExplorer11(WindowsSevenProfessional):

Note:Myproblemliesintheverticalalignmentofballs3and4.

IbelievetheproblemisinrelationtothestructureofmyHTML.

Here'smyexample:

* {
        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>

Sample generated in codepen: link

What is the best HTML or technical framework to get this vertical alignment?

html css

asked by anonymous 17.06.2016 / 22:40

1 answer

How to write accented fields in sqlite3 via Python? How to manipulate multiple inputs with same name in Java?

score 1 · Answer 1

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

I added a new div that will contain the contents of it, thus: <div class="mini-ball mini-ball-top-left"><div class="conteudo">1</div></div>

Now to work correctly just add position:relative; to the class .mini-ball and create the copy of the CSS of the .cont. class.

Follow it below:

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