div中div的对齐问题

Question

我试图创建一个进度条，但我在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的中间？

Answer 1

给内部margin: 0 auto;

Answer 2

您制作了.inner position: absolute元素。只需将left: 0;和right: 0;添加到.inner CSS规则中。

默认情况下，Div的宽度为100％，除非你绝对需要，否则永远不要将div设置为100％......出于某种原因。

修改

好的，我实际上不明白什么不适合你。检查此JSFiddle。我认为问题在于你的背景。

Answer 3

JSfiddle Demo

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;
}