[更新]事实证明，我可以使用transform，并且根据css3将其转换为百分比 当与％一起使用transform时，它相对于元素自身的框尺寸，而不是其父元素的尺寸。
全部：
我想知道如何制作一个在圆形区域上方居中对齐文本的小工具：
HTML结构类似于：
.bar {
display: inline-block;
width: 300px;
height: 5px;
background-color: grey;
position: absolute;
top:50px;
left:50px;
}
.tick {
display: inline-block;
width: 9px;
height: 9px;
background-color: whitesmoke;
border: 1px solid grey;
box-sizing: border-box;
border-radius: 4px;
cursor: pointer;
position: absolute;
left:10px;
top: -2px;
text-align: center;
}
.title {
position: absolute;
bottom: 100%;
background-color: whitesmoke;
border: 1px solid grey;
width: auto;
white-space: nowrap;
border-radius:2px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;
} <div class="bar">
<span class="tick">
<span class="title">6/1/2015</span>
</span>
</div>我希望标题中心与下面的那个圆形圆圈对齐。有没有一种简单的方法可以在CSS中做到这一点
谢谢
您可以使用 transform
.title {
...
transform: translateX(-50%);
}
要获得更大的兼容性，请使用-webkit-transform和-ms-transform。请参阅此处的兼容性图表：http : //caniuse.com/#search=transform
.bar {
display: inline-block;
width: 300px;
height: 5px;
background-color: grey;
position: absolute;
top:50px;
left:50px;
}
.tick {
display: inline-block;
width: 9px;
height: 9px;
background-color: whitesmoke;
border: 1px solid grey;
box-sizing: border-box;
border-radius: 4px;
cursor: pointer;
position: absolute;
left:10px;
top: -2px;
text-align: center;
}
.title {
position: absolute;
bottom: 100%;
background-color: whitesmoke;
border: 1px solid grey;
width: auto;
white-space: nowrap;
border-radius:2px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;
transform: translateX(-50%);
}<div class="bar">
<span class="tick">
<span class="title">6/1/2015</span>
</span>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句