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

Question

The text in my TextWrapper div won't center align. text-align: center worked when I didn't use position: relative and : absolute on them, but they are necessary for my jQuery code. How do I get the text to center align in the div?

Answer 1

Absolute positioning removes the default behavior of block elements to fill the width of their parent element. Either add width: 100% or left: 0; right: 0; left: 0; right: 0; to the absolutely positioned divs.

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

 .Border { border: 1px solid black; display: inline-flex; height: 110px; } #ImgAndText { text-align: center; } .Img { width: 75px; height:75px; } #TextWrapper { font-family: Helvetica; font-size: 13px; padding: 5px 5px 5px 5px; position: relative; text-align: center; } #TextWrapper div { position: absolute; 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"> <div id="ImgAndText"> <img src="#" class="Img"> <div id="TextWrapper"> <div>Text</div> <div>Other</div> </div> </div> </div>