2013-01-24 30 views
1

我想要的樣式來自然後被降價tranformed到HTML純文本生成的文本樣式的文章

的想法是讓一個段落,則居中照片(以替代文本作爲腳註),然後是下一段。

我從我的網頁獲得的HTML看起來像這樣:

<article class="news_item"> 
<header><a href="#">Hola</a><span><time datetime="2013-01-24" pubdate>24-01-2013</time></span></header> 
<p>Lorem ipsum dolor pscing elitr, sed diam nonumy eirmod </p> 
<p><img alt="Alt text" src="bla/bla/bla.png"/></p> 
<p>labore et dolore magna aliquyam erat, </p> 

</article> 

和造型是:

.news_item { 
    clear: left; 
    text-align: justify; 
    max-width:600px; 
} 

.news_item header{ 
    font-size: 16px; 
    font-weight: bold; 
} 

.news_item time{ 
    font-size: 12px; 
    position:relative; 
    float: right; 
} 


.news_item img { 
    max-width: 390px; 
    float: center; 
    position: relative; 
    clear: both; 
    margin-left:auto; 
    margin-right:auto; 
    } 

.news_item p img { 
    max-width: 390px; 
    padding: 5px; 
    float: center; 
    position: relative; 
    clear: both; 
    margin-left:auto; 
    margin-right:auto; 
    } 

.news_item p { 
    width: 600px; 
    text-align: justify; 
    } 

不要緊,我做什麼,圖像從來沒有在中心文章。我想這與降價有關,在圖像周圍放置一個<p></p>,但我不知道如何處理這個問題。

任何人都可以幫到我嗎?

回答

1

樣式使用圖像:

display:block; 
margin-left:auto; 

center是一個無效的浮點值。

這裏是一個演示:http://jsfiddle.net/JxBLq/

+0

謝謝。這讓我發瘋。 – unaiherran