CSS:在添加文本溢出属性后,绝对定位的文本不会以div为中心

时间:2017-04-11 03:18:28

标签: javascript jquery html css

抱歉,我必须再次回到这里。但是我向text-overflow: ellipses div添加了TextCut属性,因为我需要将其截断,但之后它不会再次居中。它会回到左侧而不是应该在的中心。我试着自己解决了一个小时,但我真的很沮丧,我需要帮助。我再次添加了我的代码,谢谢你的帮助

1 个答案:

答案 0 :(得分:1)

margin: auto;添加到#TextCut



$(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, #TextWrapper1 {
	font-family: Helvetica;
	font-size: 13px;
	padding: 5px 5px 5px 5px;
	position: relative;
	text-align: center;
}
#TextWrapper div, #TextWrapper1 div {
	position: absolute;
	text-align: center;
	left: 0;
	right: 0;
}
#TextCut {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	width: 50%;
    margin: auto;
}

<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 id="TextCut">EvenMoreText</div>
		</div>
	</div>	
					
</div>
&#13;
&#13;
&#13;