2015-01-16 32 views
0

奇怪。很奇怪。沿0:所以我有Lorem存有的一個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。

這裏的大文字的jsfiddle:

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

這裏是它工作

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

牢記的jsfiddle,所有我改變是<content>

回答

3

您需要使用文本對齊在#內容股利:

#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; 
} 

注意:當您使用左,右,底部或頂部,你需要定義的位置,而無需顯式設置位置相對值,絕對值或固定值不會像靜態位置那樣工作,靜態位置不能定義這些值。

+0

我傾向於不使用width:100%,因爲它總是給我一個底部的滾動條。這是爲什麼? – hexagonest

+0

您需要在使用絕對位置時設置寬度,您可以將寬度從100%減少到80%左右...... –

相關問題