在div中心顶部内对齐文本

Question

Im trying to align first a div to the center. 我试图先将div对准中心。 Inside that div are 3 other divs with some text inside them and i want to align that text to the center top of the inner divs. 在那个div里面是3个其他div，里面有一些文本，我想将这些文本与内部div的中心对齐。

I wrote this jsbin webpage but the inner text isn´t center at the top and the out div isnt center 我写了这个jsbin网页，但内部文本不在顶部居中，out div不是中心

http://jsbin.com/beyuhaxe/1/ http://jsbin.com/beyuhaxe/1/

<!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 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

Math (400-300) / 4 = 25px for equal spacing on your inner div. 数学（400-300）/ 4 = 25像素，相等于内部div的间距。

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

also, doing a css reset will help you make sure you don't have other margins or padding somewhere. 另外，进行CSS重置将帮助您确保没有其他边距或填充物。

Answer 2

Your styles are inheriting a margin , to over-ride this you could put: 您的样式继承了margin ，以替代您可以放置的margin ：

p { 
    margin:0;
}

but you should consider this in a reset at the top of your css file, then to center the outer div, i would use: 但是您应该在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