如何使标题div中心对齐

Question

[UPDATE]事实证明我可以使用transform,并且根据css3转换百分比 当使用变换%时,它相对于元素self的盒子维度而不是它的父级.

---

所有:

我想知道如何在圆形区域上方制作一个中心对齐文本的小工具:

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中有没有一种简单的方法可以做到这一点

谢谢

Answer 1

您可以使用 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>