如何使标题div中心对齐

Question

[更新]事实证明我可以使用transform，并根据css3 translate in percent 使用带有％的变换时，它相对于元素自身的方框尺寸而不是其父级。

所有

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

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>