在div中心頂部內對齊文本

Question

我試圖先將div對准中心。 在那個div里面是3個其他div，里面有一些文本，我想將這些文本與內部div的中心對齊。

我寫了這個jsbin網頁，但內部文本不在頂部居中，out div不是中心

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<div id="all">
  <div id="uno" class="try">
    <p>try1</p>
  </div>

  <div id="dos" class="try">
    <p>try2</p>
  </div>

  <div id="tres"  class="try">
    <p>try3</p>
  </div>
</div>

</body>
</html>

CSS

#uno{
  background-color: lightblue;
  width:100px;
  height:50px;
}

#dos{
  background-color: lightgreen;
  width:100px;
  height:50px;
}

#tres{
  background-color: red;
  width:100px;
  height:50px; 
}

#all{
  width:400px;
  margin: auto;
}

.try {
  position:relative;
  float: right;
  margin-right:10px;
  text-align:center;
}

Answer 1

數學（400-300）/ 4 = 25像素，相等於內部div的間距。

.try {
  position:relative;
  float: right;
  margin-right:25px;
  text-align:center;
}

另外，進行CSS重置將幫助您確保沒有其他邊距或填充物。

Answer 2

您的樣式繼承了margin ，以替代您可以放置的margin ：

p { 
    margin:0;
}

但是您應該在css文件頂部的重置中考慮到這一點，然后將外部div居中，我將使用：

#all{
    width:400px;
    margin-left: auto;
    margin-right: auto;
}

在div中心頂部內對齊文本

問題描述

2 個解決方案

解決方案1
1 已采納 2014-04-08 16:31:53

解決方案2
0 2014-04-08 16:43:43

在div中心頂部內對齊文本

問題描述

2 個解決方案

解決方案1 1 已采納 2014-04-08 16:31:53

解決方案2 0 2014-04-08 16:43:43

解決方案1
1 已采納 2014-04-08 16:31:53

解決方案2
0 2014-04-08 16:43:43