Проблемы с выравниванием с div внутри div

Question

Проблемы с выравниванием с div внутри div

0

Я пытаюсь создать индикатор выполнения, и у меня проблема с выравниванием div внутри div.

CSS:

.outer {
width: 20px;
height: 190px;
border: 2px solid #ccc;
overflow: hidden;
position: relative;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
display:inline-block;
}

.inner {
    width: 100%;
    overflow: hidden;
    position: absolute;
    border-top-width: 0;
    background-image: url('/images/progressBar2Red.png');
    background-size: 20px;
    bottom: 0;
    height: 0%;
    display:inline-block;
}
.progress{
    display: inline-block;
    align-items:center;
}

HTML:

<div class="progress">
   <label class="progNum">20</label><br />
   <div class="outer"> 
     <div class="inner"></div>
   </div>
</div>

По какой-то причине внутренний div не находится точно в середине внешнего div. Вот как это выглядит:

Как я могу поместить внутренний div точно в середину внешнего div?

user2958571 17 апр. 2014, в 18:09

Источник

0

align-items:center; это не только flexbox?
Paulie_D 17 апр. 2014, в 16:03
0

Также не используйте <br /> для макета.
Paulie_D 17 апр. 2014, в 16:06
0

Отправить ссылку на этот скрипт, я использовал ваш CSS и HTML, и он работает просто отлично.
Linek 17 апр. 2014, в 16:11

Показать ещё 1 комментарий

Теги:

html

css

3 ответа

0

Дайте внутреннее margin: 0 auto;

Shakesy 17 апр. 2014, в 14:49

0

Демо-версия JSfiddle

HTML

<div class="progress">
   <label class="progNum">20</label>
   <div class="outer"> 
     <div class="inner"></div>
   </div>
</div>

CSS

.outer {
height: 190px;
border: 2px solid #ccc;
overflow: hidden;
position: relative;
border-radius: 4px;
}

.inner {
    width: 100%;
    position: absolute;
    border-top-width: 0;
    background-color: red;
    bottom: 0;
    width: 100%;
    height:20px; /* or anything else you want */
    border-radius: 4px;
}
.progress{
    display: inline-block;
    width: 20px; /* sets width of the whole bar - everything else can be 100% */
}

.progNum {
    text-align: center;
    display: block;
}

Paulie_D 17 апр. 2014, в 14:14

Ещё вопросы

Также не используйте <br /> для макета.
Отправить ссылку на этот скрипт, я использовал ваш CSS и HTML, и он работает просто отлично.

Linek · Accepted Answer · 2014-04-17T14-12-00.000Z

Вы сделали этот .inner элемент position: absolute. Просто добавьте left: 0; и right: 0; к .inner CSS правил.

По умолчанию разделители имеют ширину 100%, никогда не устанавливайте div на 100% ширину, если только вам это не понадобится... по какой-то причине.

РЕДАКТИРОВАТЬ

Хорошо, я действительно не понимаю, что НЕ работает для вас. Проверьте этот JSFiddle. Я думаю, что проблема в том, что вы работаете.

Это часть более сложной страницы. Добавление справа: 0; и слева: 0; решил проблему. Спасибо.