如何在不离开该区域的情况下应用内衬垫

Question

<div id="divInnerFirst">
    <div id="divTitleHeaderUC">
        <span id="spanTitleHeaderUC">Urgent Care Wait Time</span>
    </div>
    <div id="divSubTitleUC">
            <div id="smallText" style="position: absolute; bottom: 0; width: 100%; color: #000000; text-align: center;">If you are experiencing a life-threatening emergency, call 911 or go to your nearest emergency room. Do not go to the urgent care center.<br>Estimated wait times are provided for general information only, may change at any time, and may not reflect your actual wait time once you arrive.</div>
    </div>
</div>

样式表：

#divTitleHeaderUC {
    width: 265px;
    height: 40px;
    background-color: #FFFFFF;
    text-align: center;
    box-shadow: inset 0 0 10px rgba(245, 159, 36, 0.5);
    position: relative;
}
#divSubTitleUC {
    width: 265px;
    height: 220px;
    background-color: #FFFFFF;
    text-align: center;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -webkit-box-shadow: #F59F24 0px 2px 3px;
    -moz-box-shadow: #F59F24 0px 2px 3px;
    box-shadow: #F59F24 0px 2px 3px;
    position: relative;
}
#spanTitleHeaderUC {
    width: 100%;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    background-color: #FFFFFF;
    font-family: 'blackjarregular';
    font-size: 18pt;
    color: #F59F24;
    font-weight: bold;
}

截图：

正如您从屏幕截图中看到的那样，文本左右两侧过多，这使得难以阅读。如何应用内部填充以使文本左右不太多？ 我尝试向DIV添加填充，但它会延伸divSubTitleUC。

添加保证金给出以下外观：

Answer 1

取走宽度，但改为：

left:0;
right:0;

然后

padding:0 10px;

JSFiddle

left和right'拉伸'要尝试触及父容器两侧的元素。由于容器是position:relative;，它永远不会试图突破父级的边界。

Answer 2

您可以将填充添加为百分比并减小宽度，如

<div id="smallText" style="position: absolute; bottom: 0; width: 80%; padding: 0 10%; color: #000000; text-align: center;">

Answer 3

我会删除绝对定位和宽度，而只是填充它。

像这样：

div id="smallText" style="color: #000000; text-align: center;">

#smallText{
padding: 50px 10px;
padding-bottom:0;

}

http://jsfiddle.net/DrUx8/

Answer 4

SEE THE DEMO使用以下属性而不是使用position:absolute;，您的问题将得到解决。

#divSubTitleUC {
     display: table;
}

#smallText {
    display: table-cell;
    vertical-align: bottom;  
}