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>