Как выровнять внутренние divs в центре или внизу на основе%

В моем приложении JS у меня есть панель, которая разделена на три секции, каждая из которых содержит width: 100% и height:33.33%, а затем в каждом разделе я хочу иметь некоторые div.Как выровнять внутренние divs в центре или внизу на основе%

В средней части внутренние секции должны находиться в середине вертикально и горизонтально.
В нижней части внутренние деления должны оставаться в нижней, но средней по горизонтали.

$(".panel2").hide(); 
 
$(".panel1").click(function() { 
 
    $(this).hide(); 
 
    $(".panel2").show(); 
 
}); 
 
$(".panel2").click(function() { 
 
    $(".panel1").show(); 
 
    $(this).hide(); 
 
});

div.box { 
 
    width: 400px; 
 
    height: 400px; 
 
    border: 1px solid #000; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
div.box > .blur { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url(http://goo.gl/0VTd9W); 
 
    -webkit-filter: blur(8px); 
 
} 
 

 
div.box > .panel1, 
 
div.box > .panel2 { 
 
    width: 100%; 
 
    Height: 100%; 
 
    Background: rgba(0, 0, 0, 0.5); 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
} 
 

 
div.box > .panel2 { 
 
    background: rgba(255, 0, 0, 0.2); 
 
} 
 

 

 
/** sub sections **/ 
 

 
div.panel1 > .top, 
 
div.panel1 > .middle, 
 
div.panel1 > .bottom { 
 
    width: 100%; 
 
    height: 33.33%; 
 
    border: 1px dashed #000; 
 
} 
 

 
div.middle > div, 
 
div.bottom > div { 
 
    width: 30px; 
 
    height: 30px; 
 
    border: 1px dashed #000; 
 
    float: left; 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <div class="blur"></div> 
 
    <div class="panel1"> 
 
    <div class="top"></div> 
 
    <div class="middle"> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
    </div> 
 
    <div class="bottom"> 
 
     <div></div> 
 
     <div></div> 
 
     <div></div> 
 
    </div> 
 
    </div> 
 
    <div class="panel2">Panel 2</div> 
 
</div>

Как вы можете видеть, что я реализовывал дивы, но не может выровнять их в описанных позициях, начиная с родительской дивой в процентах основы.

Есть идеи, чтобы согласовать их?

источник

2015-12-19 TheGuy

ли нацеливание старых браузеров, таких как IE9 требования? – azium

@azium хорошо, это не требование, но я предпочитаю иметь хотя бы аналогичный вид в IE9. – TheGuy

Есть много способов, которые вы можете достичь вашего желания ситуации, такие как transform: translate(-50%);, position:absolute и отрицательного margin, display:inline-block;, display: flex; и т.д. Здесь display:inline-block; используется. Вы можете добавить еще один DIV (.centered-vertically), дают height:100%; и не забывать remove extra spaces, который произошел по display:inline-block; и, наконец, использовать vertical-align свойство выравнивать их bottom, middle и top. Однако здесь завершен код.

$(".panel2").hide(); 
 
$(".panel1").click(function() { 
 
    $(this).hide(); 
 
    $(".panel2").show(); 
 
}); 
 
$(".panel2").click(function() { 
 
    $(".panel1").show(); 
 
    $(this).hide(); 
 
});

div.box { 
 
    width: 400px; 
 
    height: 400px; 
 
    border: 1px solid #000; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
div.box > .blur { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url(http://goo.gl/0VTd9W); 
 
    -webkit-filter: blur(8px); 
 
} 
 

 
div.box > .panel1, 
 
div.box > .panel2 { 
 
    width: 100%; 
 
    Height: 100%; 
 
    Background: rgba(0, 0, 0, 0.5); 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
} 
 

 
div.box > .panel2 { 
 
    background: rgba(255, 0, 0, 0.2); 
 
} 
 

 

 
/** sub sections **/ 
 

 
div.panel1 > .top, 
 
div.panel1 > .middle, 
 
div.panel1 > .bottom { 
 
    width: 100%; 
 
    height: 33.33%; 
 
    border: 1px dashed #000; 
 
} 
 

 
div.middle > div:not(.centered-vertically), 
 
div.bottom > div:not(.centered-vertically) { 
 
    width: 30px; 
 
    height: 30px; 
 
    border: 1px dashed #000; 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
    margin: 10px; 
 
} 
 

 
div.bottom > div:not(.centered-vertically) 
 
{ 
 
    vertical-align:bottom; 
 
    } 
 

 
div.middle > .centered-vertically, 
 
div.bottom > .centered-vertically 
 
{ 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
    height:100%; 
 
    
 
    } 
 

 
div.middle 
 
{ 
 
    text-align:center; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <div class="blur"></div> 
 
    <div class="panel1"> 
 
    <div class="top"></div> 
 
    <div class="middle"> 
 
     <div class="centered-vertically"></div><div></div><div></div><div></div> 
 
    </div> 
 
    <div class="bottom"> 
 
     <div class="centered-vertically"></div><div></div><div></div><div></div> 
 
    </div> 
 
    </div> 
 
    <div class="panel2">Panel 2</div> 
 
</div>

источник

2015-12-19 04:24:15 Alex

Flexbox является самым простым решением. Просто добавьте следующие правила для ваших средних и нижних контейнеров:

.middle { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.bottom { 
    display: flex; 
    align-items: flex-end; 
    justify-content: center; 
}

codepen

источник

2015-12-19 05:09:01 azium

Как выровнять внутренние divs в центре или внизу на основе%

ответ

Смежные вопросы