我的TextWrapper div中的文本不会居中对齐。当我没有在它们上使用text-align: centerposition: relative时,: absolute可以工作,但是它们对于我的jQuery代码是必需的。如何使文本在div中居中对齐?

最佳答案

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



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

08-06 02:29
查看更多