html - 仅当我使用大型 Lorem Ipsum 时，我的文本才居中

Question

奇怪。很奇怪。所以我在 XML 文件中有一段 Lorem Ipsum:

<?xml version="1.0" encoding="UTF-8"?>
<post>
    <title>Test</title>
    <content>Some test content<br/><br/><br/>TestTest Test.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar eu magna bibendum dictum. Pellentesque interdum mi ac imperdiet tristique. Phasellus nec sapien elit. Donec convallis ante non vestibulum ultrices. Quisque ullamcorper est lectus, a sollicitudin sapien faucibus ac. Nam gravida rhoncus elementum. Nullam et velit dapibus, dignissim sem sit amet, luctus magna. Cras mollis eros dapibus, imperdiet purus convallis, dictum magna. Aliquam nisl lacus, venenatis vel lacinia quis, finibus at est. Nulla maximus sed enim in pretium. Fusce eu placerat dui. Curabitur mi magna, malesuada efficitur tellus sit amet, rutrum tristique erat. Phasellus sit amet orci purus. Pellentesque congue orci a tincidunt condimentum. Nullam semper, metus a tincidunt pulvinar, felis nibh faucibus mauris, a ultricies mauris tortor vitae sem. Praesent sed aliquet mauris.

Pellentesque odio lorem, dictum sed ipsum eget, viverra luctus libero. In tincidunt nisl eu nunc elementum, ut facilisis massa volutpat. In enim nibh, gravida vitae tempus eget, semper at orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Duis mattis tellus id lacus tempor tempus. Proin posuere leo quis neque imperdiet, sit amet facilisis lectus consectetur. Ut quam velit, elementum vel ultrices in, consectetur vel arcu. Praesent enim risus, fermentum vitae eros quis, dignissim convallis ligula. Vestibulum ultrices tempus diam id dapibus.

Quisque vel elit diam. Vivamus sed rhoncus nunc, id tincidunt augue. Vivamus et cursus mauris. Etiam finibus, risus accumsan pulvinar facilisis, ex erat vulputate nunc, sit amet elementum velit augue ut arcu. Etiam quis pretium urna, a rutrum ex. In lacinia metus nec urna pellentesque, sed accumsan nisi imperdiet. Phasellus porttitor porttitor lacus, nec aliquam magna scelerisque quis. Nullam auctor diam nisl, sed accumsan nisi ullamcorper ut. Sed nec ligula neque. Maecenas enim est, pharetra sit amet pulvinar nec, varius at tellus. In convallis tincidunt ex eu porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec luctus ex, et ultrices turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Fusce aliquet aliquet turpis, volutpat tristique lacus euismod id. Maecenas eu tortor eget tellus sodales fringilla. Sed ultricies ante eu consectetur luctus. Ut lobortis ullamcorper lacinia. Nam mattis felis ullamcorper leo ornare finibus. In quis commodo ligula. Nulla auctor purus maximus massa suscipit, at hendrerit arcu congue. Proin tincidunt porttitor quam, ut scelerisque urna feugiat sit amet. Donec mollis magna auctor finibus faucibus. Fusce fermentum ornare lobortis. Ut a eros a enim laoreet venenatis. Etiam eget elementum tortor. Nulla in risus eu erat ullamcorper pellentesque.

Nunc ac tincidunt massa, at vestibulum mi. Fusce iaculis, sem sed dictum volutpat, felis orci faucibus urna, vel imperdiet neque quam at tortor. Praesent porta arcu auctor, auctor massa sit amet, pretium eros. Nullam ligula neque, faucibus varius nulla et, dictum commodo dui. Nullam tempor accumsan malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in sodales odio. Cras posuere sagittis sem. Proin non augue vitae tortor vulputate imperdiet. Aenean tincidunt, leo at rhoncus lacinia, urna neque placerat mi, vitae dapibus mauris nibh at quam. Aenean in cursus ipsum, sed varius nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque suscipit lacus. Aliquam erat volutpat. Nulla scelerisque, ligula quis porta dapibus, mi lacus fermentum justo, eget pulvinar odio mauris non sem.
</content>
    <date>April 1st 2015</date>
</post>

这会居中(连同标题“测试”)到页面的中心，文本对齐:0 沿边距内容，左:0 和右:0。

这里是大文的jsfiddle:

http://jsfiddle.net/6k5szuf0/embedded/result

这是它的 jsfiddle 不工作

http://jsfiddle.net/6k5szuf0/1/embedded/result

请记住，我只更改了 <content> .

Answer 1

您需要在#content div 中使用文本对齐:

#content {
    margin-top:20px;
    position:absolute;
    top:100%;
    text-align: center;
    width: 100%;/*also set it's width when you use absolute position*/
}

这是 result .

还有一个旁注:你不需要使用:

.center {
    text-align:center;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
}

.post_content {
    left: 0;
    right: 0;
}

注意:当您使用 left、right、bottom 或 top 时，您需要定义位置，如果没有将位置明确设置为 relative、absolute 或 fixed，这些值将不起作用，因为它在 static position 和 in static位置无法定义这些值。