无法将文本置于绝对定位的div中

Question

我有2个div，一个叫info-holder，另一个叫info-content。

信息持有者定位relative，而信息内容定位absolute。

内容包含（或最终将包含）段落和标题元素，但当我希望它们对齐为中心时，它们会左对齐。

知道如何解决这个问题吗？

以下是我目前的情况：http://jsfiddle.net/2egL00y5/

Answer 1

您需要在元素中添加width: 100%：

.info-content {
    width: 100%;
}

h1 {
    width: 100%;
}

FIDDLE：https://jsfiddle.net/lmgonzalves/2egL00y5/1/

修改

如果您不需要position: absolute，则需要应用的唯一方式是：

.info-content {
    text-align: center;
}

删除h1中的样式。

FIDDLE：https://jsfiddle.net/lmgonzalves/2egL00y5/4/

Answer 2

这是我做的：

    if (!strchr(singleLineContent, '\n')) {
        printf("line %d too long: %s\n", i, singleLineContent);
    }
    char *token = strtok(singleLineContent, ",\n");
    if (token == NULL) {
        printf("No numbers at line %d\n", i);
        return -3;
    }
    fprintf(fPointerForWriting, "%d", atoi(token));
    token = strtok(NULL, ",\n");
    if(token == NULL) {
        printf("Missing number at line %d\n", i);
        return -3;
    }
    fprintf(fPointerForWriting, ",%d     %d\n", atoi(token), i);

Answer 3

替代方案 - transform: translate

.info-holder {
	position: relative;
	height: 420px;
	max-height: 420px;
	width: 29%;
	display: inline-block;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	background: rgba(0, 0, 0, 0.5);
}
.info-content {
	position: absolute; left: 50%;
	text-align: center;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
h1 {
	margin: 0 auto;	
	text-align: center;
}

<div class="info-holder">
    <div class="info-content">
        	<h1>Hello</h1>
    </div>
</div>