CSS：无法在相对位置的div中居中对齐文本？

Question

我的TextWrapper div中的文字不会居中对齐。 text-align: center工作时，我没有使用position: relative和: absolute对他们，但他们是我的jQuery代码所必需的。如何让文本在div中对齐？

Answer 1

绝对定位删除块元素的默认行为以填充其父元素的宽度。将width: 100%或left: 0; right: 0;添加到绝对定位的div。

$(function(){ 
 
\t $("#TextWrapper div:gt(0)").hide(); 
 
\t setInterval(function(){ 
 
\t \t var current = $('#TextWrapper div:visible'); 
 
\t \t var next = current.next().length ? current.next() : $('#TextWrapper div:eq(0)'); 
 
\t \t current.fadeOut(500); 
 
\t \t next.fadeIn(500); 
 
\t }, 1000); 
 
});

.Border { 
 
\t border: 1px solid black; 
 
\t display: inline-flex; 
 
\t height: 110px; 
 
} 
 
#ImgAndText { 
 
\t text-align: center; 
 
} 
 
.Img { 
 
\t width: 75px; 
 
\t height:75px; 
 
} 
 
#TextWrapper { 
 
\t font-family: Helvetica; 
 
\t font-size: 13px; 
 
\t padding: 5px 5px 5px 5px; 
 
\t position: relative; 
 
\t text-align: center; 
 
} 
 
#TextWrapper div { 
 
\t position: absolute; 
 
\t text-align: center; 
 
    left: 0; 
 
    right: 0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<div class="Border"> 
 

 
\t <div id="ImgAndText"> 
 
\t \t <img src="#" class="Img"> 
 

 
\t \t <div id="TextWrapper"> 
 
\t \t \t <div>Text</div> 
 
\t \t \t <div>Other</div> 
 
\t \t </div> 
 
    
 
\t </div> \t 
 
\t \t \t \t \t 
 
</div>