Question

我试图先将div与中心对齐。在div里面是3个其他div，里面有一些文字，我想把那个文本对齐到内部div的中心顶部。

我写了这个jsbin网页，但内部文字不在顶部，而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 = 25px，内部div的间距相等。

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

另外，执行css重置可以帮助您确保在某处没有其他边距或填充。

Answer 2

你的风格继承了margin，你可以把它覆盖：

p { 
    margin:0;
}

但是您应该在 css 文件顶部的重置中考虑这一点，然后将外部div居中，我会使用：

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

对齐div中心顶部的文本

2 个答案: