Центрирование определенного размера div в div

Я пробовал обычные методы для горизонтального центрирования div в пределах div. Я все еще должен делать что-то неправильно. Проверьте следующий jsFiddle и помогите мне сосредоточить изображение резервуара под заголовком «Внутренний уровень». Для удобства я добавил границу ко всем тегам div.Центрирование определенного размера div в div

jsFiddle Source

HTML:

<body> 
    <a href="#"> 
    <div class="div-inline-block" style="text-align:left;width:150px;"> 
     <h2>TEST</h2> 
     <p>A description</p> 
    </div> 

    <div class="div-inline-block"><p><b>Last Update:</b><br />???</p></div> 
    <div class="div-inline-block"><p><b>Flow Rate:</b><br />??? gpm</p></div> 
    <div class="div-inline-block"><p><b>Inner Level:</b><br />???</p><div class="tank-level-outer"><div class="tank-level-inner"></div></div></div> 
    <div class="div-inline-block"><p><b>Outer Level:</b><br />???</p></div> 
    <div class="div-inline-block"><p><b>Battery Voltage:</b><br />???</p></div> 
    <div class="div-inline-block"><p><b>Rainfall:</b><br />???</p></div> 
    <div class="div-inline-block" style="text-align:left;width:100%;"><p><b>Notifications:</b><br />???<br />???</p></div> 
    </a> 
</body>

CSS:

a{ 
    text-decoration:none; 
} 
div{ 
    border:1px solid red; 
} 
.div-inline-block { 
    text-align: center; 
    height: 100%; 
    display: inline-block; 
    vertical-align: top; 
    margin-left:15px; 
    width: 100px; 
} 
.tank-level-outer { 
    border:1px solid black; 
    width:25px; 
    height:32px; 
    display:table-cell; 
    vertical-align:bottom; 
    margin:0 auto; 
} 
.tank-level-inner { 
    background-color:dodgerblue; 
    width:25px; 
    height:25px; 
}

источник

2014-10-27 Psyfun

Нравится: http://jsfiddle.net/czgoxafr/3/ ?? – LcSalazar

Отправьте свой код на свой вопрос, пожалуйста. Всегда. – j08691

Здесь [** CSS-Tricks - Центрирование: полное руководство **] (http://css-tricks.com/centering-css-complete-guide/) –

Добавить это:

.tank-level-outer { 
    display: table; 
    margin: 0 auto; 
}

источник

2014-10-27 19:53:43 im1dermike

Объяснение вашего решения было бы полезно. – showdev

Это центрирует 'div', но теперь внутренний' div' выравнивается сверху, а не выравнивается по нижнему. Я предполагаю, что существует конфликт между использованием 'table',' table-cell' и alignments. 'display: table-cell' был самым простым способом выровнять внутренний div в нижней части. – Psyfun

изменения CSS-код из ДИВ .tank-уровня внешней и добавить margin zero auto, remove dis игра настольных клетки

.tank-level-outer { 
border: 1px solid #000; 
width: 25px; 
height: 32px; 
margin: 0px auto; 
vertical-align: bottom;}

источник

2014-10-27 19:59:00

Это работает:

.tank-level-outer { 
    width:25px; 
    height:32px; 
    display:block; // not necessary since this class is applied to a div 
    vertical-align:bottom; 
    margin:0 auto; 
}

источник

2014-10-27 19:59:16 sebnukem

добавить

.div-inline-block { 
    text-align: center; 
    height: 100%; 
    display: inline-block; 
    vertical-align: top; 
    margin-left:15px; 
    width: 100px; 
    margin:0 auto; 
} 
.tank-level-outer { 
    border: 1px solid black; 
    width: 25px; 
    height: 32px; 
    margin: 0 auto; 
    padding: 0; 
} 
.tank-level-inner { 
    background-color:dodgerblue; 
    width:25px; 
    height:25px; 
    margin-top:7px; 
    display: table; 
    vertical-align: bottom; 
}

Изменена скрипка

http://jsfiddle.net/czgoxafr/22/

источник

2014-10-27 20:00:38

Синий внутренний 'div' полностью заполнил внешний' div'. Он должен иметь пробел в верхней части 7 px. – Psyfun

попробуйте этого приятеля http://jsfiddle.net/czgoxafr/21/ –

-1

Пробуйте следующее:

//css 

.firstDiv{ 
padding:25% 25% 25% 25% 
height:400px; 
width:400px; 
background-color:red; 
} 

.secondDiv{ 
height:200px; 
width:200px; 
background-color:pink; 
} 

//html 

<div class="firstDiv"> 
<div class="secondDiv"> 
</div> 
</div>

источник

2014-10-27 20:08:21

Центрирование определенного размера div в div

ответ

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