如何對齊一個div中的div中間

我在div內創建了一個div和另一個div。我想要這些點線...應該是父div（水平和垂直）的中間。請幫幫我。謝謝。如何對齊一個div中的div中間

<div class = "test" style = "width: 32px; height: 22px; display: inline-block; border: 1px solid; border-radius: 5px; text-align: center;"> 
 
\t <div style = "display: inline-block;">...</div> 
 
</div>

來源

2016-08-14 Melbin Mathai

起初，你不需要另一個div。使用文本對齊：中心+線高+填充 –

如果你仍然需要一個div使用左：50％; margin-left：px中的半寬 –

@Jonasw哦！好。這很酷。它的工作。謝謝。 –

一種可能性（而且有很多），可以使用CSS Flexible Box Layout。

您可以使用justify-content屬性定義沿着主軸的對齊方式和align-items屬性，以定義Flex項目沿橫軸放置的方式。

您.test集裝箱會是這樣的：

.test { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

您可以this JSFiddle檢查的例子。

來源

2016-08-14 10:32:22 HiDeo

它工作正常。謝謝。 –

，你必須對孩子的父元素和inline-block的關於使用表單元格，並添加垂直對齊：中間父元素：

<div class = "test" style = "width: 32px; height: 22px; display: table-cell; border: 1px solid; border-radius: 5px; text-align: center; vertical-align: middle;"> 
    <div style = "display: inline-block;">...</div> 
</div>

https://jsfiddle.net/Lkfr6ar1/

來源

2016-08-14 10:32:42

但這不起作用。 –

我修改了你需要添加vertical-align：middle到父元素的代碼 –

如何對齊一個div中的div中間

回答

相關問題