Question

如何居中对齐一个不能固定宽度的绝对定位标题？有些标题可以有3个字母，但也有5,6个字。所以这段代码无法正常工作

    position: absolute;
    margin-left:-205px;
    left: 50%;

白色容器是我试图与图像中心对齐的标题 http://s29.postimg.org/57cicvi2f/aaaaaaaa.jpg

Answer 1

@Nate的第一个回答是一个很好的方法。通过（左侧和右侧0）拉伸标题并应用中心的文本对齐。

如果绝对块的收缩包裹行为很重要（即，标题只需要扩展到其内容），那么您可以使用translateX（）转换方法：http://jsfiddle.net/8h9Th/。

HTML：

<h1>Site Title</h1>

CSS：

h1 {
    font: bold 24px/2 Sans-Serif;
    padding: 0 24px;
    color: #fff;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

Answer 2

你需要给它一个相等的左侧位置和一个右侧位置，然后使用text-align:center这是一个例子：

HTML：

<div class="title">This Is A Title</div>

CSS：

.title {
   position:absolute;
   left:0;
   right:0;
   text-align:center.;
}

对齐绝对定位标题

2 个答案: