Question

我有一些文字，我试图在图表上的移动刻度线下对齐。我可以通过这样做来坚持下去：

<dependency>
    <groupId>elsevierlabs-os</groupId>
    <artifactId>spark-xml-utils</artifactId>
    <version>1.6.0</version>
</dependency>

但问题是这总是对齐，以便文本的末尾触及刻度线。我真正想要的是触摸刻度线的文本中心。但是，我不会提前知道文本的大小。

我怎样才能做到这一点？

示例：

<div class="foo">Text</div>
.foo {
  width: $tick-location px;
  text-align: right;
}

首先是我目前得到的。第二个是我想要的。

Answer 1

使用transform进行文本居中。更好地更改left而不是更改'width'

.foo {
  position:relative;
  display: inline-block;
  width: auto;
  left:100px;
  /* here text's center will be at 100px; */
  /* left:$tick-location px; */
  transform:translateX(-50%);
}

<div class="foo">Text</div>

Answer 2

可能有javascript解决方案。 https://jsfiddle.net/wingsofwind/mxspevy0/

＆＃13;

var b = $(".longerdiv").html().length;
var a = $(".foo").html().length;
$(".foo").offset({
  left: b * 3.02
});

＆＃13;

.foo {
  width: 20 px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="longerdiv">------------|------</div>
<div class="foo">Text</div>

＆＃13;

Answer 3

我已经创建了一个你正在尝试的样本。希望这会奏效。

var e = document.getElementById("animatedElement");
var s = 1;
var timer = setInterval(function(){
    var ePosition = e.offsetLeft;
    e.style.left = (ePosition + 10) + 'px';

}, 1000);
setTimeout(() => { clearInterval(timer); }, 45000);

.foo {
  width: 50px;
  text-align: center;
  border-top:5px solid #000;
}
#animatedElement {
    position: absolute;
    top: 5px;
    left: 10px;
    width: 25px;
    height: 25px;
    background: red;
}
.mainDiv{
width:500px;
height:200px;
background-color:#e8dbff;
border:2px solid #000; 
}
.divWithTick{
width: 50px;
height:30px;
background-color:#fff;
}
.tick{
width:2%;
height:30px;
background-color:blue;
margin:0 auto;
}

<div class="mainDiv">
    <div id="animatedElement">
        <div class="divWithTick">
            <div class="tick"></div>
        </div>
        <div class="foo">
            Text
        </div>
    </div>
</div>

将文本与文本中心对齐作为参考点

3 个答案: