居中一行圖像，其中每個圖像都有自己的標題

我想將由四個圖像組成的行以及它們各自的標題置於其下方。目前我使用居中一行圖像，其中每個圖像都有自己的標題

<div class="clear" style="text-align: center;"> 
    <div style="float: left; padding-right: 10px;"> 
    <img>...</img> 
    <p>...</p> 
    </div> 
    <div style... 
</div>

顯然，這並沒有得到中心的容器，因爲他們浮動。我看過一個解決方案，這將奇妙的工作：

style="display: inline-block;"

於是我去了，使用了很有風格，使我的代碼看起來是這樣的：

<div style="text-align: center;"> 
    <div style="display: inline-block; vertical-align: top; padding-right: 10px"> 
    <img>...</img> 
    <p>...</p> 
    </div> 
</div>

現在，正如我所說，這個工作了奇妙的是，在預覽中它確實做了我想要的，然而，這裏是問題出現的地方。我試圖做這個作爲一個網站上的短新聞文章的一部分，該網站提供了一個相當廣泛的編輯器，它有一個函數，讓你編寫自己的HTML代碼。出於某種原因，我無法理解，在保存帖子時，似乎有一些腳本在代碼上運行，這會刪除「display：inline-block;」部分。

有沒有其他方法可以嘗試？我故意避免爲此使用表格，因爲我不確定在像智能手機這樣的小型顯示器上觀看時，它的縮放效果如何。

來源

2016-01-13 Sephi-

如何使一個類，並應用到div？使用這種方法，解析器不會將您的內聯塊聲明移除。 –

您是否嘗試過使用jquery添加顯示方式？ –

@MarcosPérezGude我似乎已經說得很糟糕......我正在編輯的編輯創建了我在DIV塊中寫入的文章。我無法在那裏創建一個新的風格類。 –

只需使用css類？

.container{ 
text-aling:center; 
} 
.container > div{ 
display:inline-block; 
}

而在HTML

<div class="container"> 
    <div>...</div> 
    <div>...</div> 
    .... 
</div>

來源

2016-01-13 15:22:08 NicolaPasqui

居中一行圖像，其中每個圖像都有自己的標題

回答

相關問題