如何使用CSS來居中此內容？

對於含糊不清的問題抱歉，但內容非常具體。我一直在玩很多不同的方法，而且我正在努力達到預期的效果。如何使用CSS來居中此內容？

所以我有一個要顯示的照片集合，並且這個集合要麼有一個或兩個照片。這些需要彼此並排顯示並居中顯示在頁面上。如果只有一張照片，則應該自行顯示並居中顯示在頁面上。每張照片都有一個需要在其上方顯示的標題，並且需要在其下方顯示一個描述。

所以它會要麼是這樣的（但居中）：

Example of a single photo.

或者它會看起來像這樣（但居中）：

Example of two photos.

我已經玩一個外部容器div，邊距爲auto 0，我玩過桌子，但我正在努力（a）讓他們居中，然後（b）能夠有一兩張照片（儘管我可以處理t他的代碼，因爲這是一個MVC視圖）。

我有點生鏽的CSS，所以任何和所有的幫助和建議非常感謝！

來源

2013-07-17 Matt Winward

可以請你分享你的HTML/CSS代碼 –

你能添加小提琴？另外，你有沒有嘗試過文字對齊：在你的容器div中心css –

告訴我們代碼請致電Oliver –

解決這個問題的一種方法是給text-align:center一個包含元素和text-align:left的孩子，例如see demo或下面的代碼。

HTML

<ul> 
    <li><h3>Title</h3><img src="http://lorempixel.com/150/150/abstract/1"/><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua.</p></li> 
    <li><h3>Title</h3><img src="http://lorempixel.com/150/150/abstract/2"/><p>Description</p></li> 
    <li><h3>Title</h3><img src="http://lorempixel.com/150/150/abstract/3"/><p>Description Description Description Description</p></li> 
</ul>

CSS

ul { 
    list-style-type:none; 
    text-align:center; 
} 

li { 
    text-align:left; 
    display:inline-block; 
    vertical-align:top; 
    max-width:150px; 
    margin-right:10px; 
}

來源

2013-07-17 08:40:28 andyb

我無法使用它，因爲我需要HTML在Word文檔中工作。儘管我沒有在我的問題中提及這一點，但我認爲這是最優雅的解決方案，它將標題，照片和描述考慮在內，因此將其標記爲答案。 –

把它們放在一個容器，這樣如果沒有兩個圖像，然後將容器寬度是一個圖像的寬度，然後把這種風格的容器上：

margin: 0 auto;

或者添加align='center'到容器

小提琴：http://jsfiddle.net/Hive7/c8p6G/

來源

2013-07-17 07:56:46

。我比我意識到的更生鏽 - 我使用「自動0」，並不能解決它爲什麼不居中！ –

剛剛發現你的jsFiddle例子後，你甚至更好 - 沒有必要設置寬度 - 謝謝！ –

@OliverCole通常不認爲要求接受答案是好的做法。 – andyb

我回到我的CSS和實現直線距離，我在使用表的解決方案嘗試了一些錯誤。這實際上非常簡單！我仍然想知道這是否可以使用div標籤，但是 - 我相信它會。

具有以下，我可以選擇

<table style="margin: 0 auto;"> 
    <tr> 
     <td style="background: #EEEEEE"> 
      <div>Title</div> 
      <div>PHOTO</div> 
      <div>Description Description Description Description Description Description Description </div> 
     </td> 
     <td style="background: #AAAAAA"> 
      <div>Title</div> 
      <div>PHOTO</div> 
      <div>Description Description Description Description Description Description Description </div> 
     </td> 
    </tr> 
</table>

來源

2013-07-17 07:59:34

這應該是對你的問題的編輯，而不是回答？ – andyb

是否要輸出的第二個TD。最後的工作了！

.container { 
    margin: 0 auto; 
} 

.photo{ 
    display: inline-block; 
} 

.detail { 
    text-align: left; 
} 

<div class="container" align="center"> 
    <div class="photo"> 
     <div class="detail">TITLE</div> 
     <div class="detail"> 
      <img src="http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg" width="200px" /> 
     </div> 
     <div class="detail">Description</div> 
    </div> 
    <div class="photo"> 
     <div class="detail">TITLE</div> 
     <div class="detail"> 
      <img src="http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg" width="200px" /> 
     </div> 
     <div class="detail">Description</div> 
    </div> 
</div>

這是jsFiddle example。

來源

2013-07-17 08:26:54

我喜歡用李爲，而div的

<ul> 
    <li> 
     <h2> Title here</h2> 
     <img src="img.jpg" alt="" /> 
     <p> descriptions here here</p> 
    </li> 
<li> 
     <h2> Title here</h2> 
     <img src="img.jpg" alt="" /> 
     <p> descriptions here here</p> 
    </li> 
    <li> 
     <h2> Title here</h2> 
     <img src="img.jpg" alt="" /> 
     <p> descriptions here here</p> 
    </li> 
</ul> 


ul{ display: block; text-align:center; } 
ul li { display: inline-block; }

來源

2013-07-17 08:54:55

如何使用CSS來居中此內容？

回答

相關問題