如何保持塊內嵌並且正確居中？

嘗試在一行上放置3個div，每個圖像的中心位於分配頁面的第三個位置。它們似乎都離左邊太遠了。另外，如何將它們垂直放置在div中？如何保持塊內嵌並且正確居中？

current results 目前的結果

下面的代碼。

HTML

<div class="block"> 
     <div class="left"> 
      <img class="swork" src="100.jpg"/> 
     </div> 
     <div class="center"> 
      <img class="swork" src="010.jpg"/> 
     </div> 
     <div class="right"> 
      <img class="swork" src="001.jpg"/> 
     </div> 
</div>

CSS

.swork { 
max-width: 300px; 
max-height: 500px; 
} 

.block { 
    width: 100%; 
    height: 350px; 
} 

.left { 
    display: inline-block; 
    width: 33%; 
} 

.center { 
    display: inline-block; 
    width: 33% 
} 

.right { 
    display: inline-block; 
    width: 33%; 
}

來源

2015-09-12 Ian Redford

*他們似乎都有點過頭了左邊。*所以我不清楚是否希望它垂直或水平排列的？ –

好吧，這兩個問題都說明了問題，儘管並不盡如人意。 –

添加vertical-align: middle和text-align: center的風格爲每一個孩子的div。

來源

2015-09-12 17:18:31 alexvance

謝謝。這解決了我的問題的第二部分，但不是第一部分。 –

嘗試'文本對齊：中心'太 –

哇，工作。非常感謝你！ –

你只需要這樣：

.block { 
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
}

Demo

來源

2015-09-12 17:32:31

對於flexbox解決方案：+1不幸的是<= IE10瀏覽器不支持該功能。 –

嘗試一下本作的CSS：

<STYLE> 
.swork { 
max-width: 300px; 
max-height: 500px; 
} 

.block { 
    width: 100%; 
    height: 350px; 
    align-content:center; 
} 

.left { 
    display: inline-table; 
    width: 33%; 
    align-content:center; 
    vertical-align:middle; 
} 

.center { 
    display: inline-table; 
    width: 33%; 
    align-content:center; 
    vertical-align:middle; 
} 

.right { 
    display: inline-table; 
    width: 33%; 
    align-content:center; 
    vertical-align:middle; 
} 
</STYLE>

和設置您的塊格對齊= 「中心」。

來源

2015-09-12 17:40:20 bil

試試這個塊類CSS ..

來源

2015-09-12 17:44:37

如何保持塊內嵌並且正確居中？

回答

相關問題