CSS：无法在相对定位的div中获取文本以居中对齐？

Question

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

Answer 1

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

＆＃13;

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;