aligning text inside of a div center top

StackOverflow https://stackoverflow.com/questions/22942721

  •  29-06-2023
  •  | 
  •  

Pergunta

Im trying to align first a div to the center. 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.

I wrote this jsbin webpage but the inner text isn´t center at the top and the out div isnt center

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

#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;
}
Foi útil?

Solução

Math (400-300) / 4 = 25px for equal spacing on your inner 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.

Outras dicas

Your styles are inheriting a margin, to over-ride this you could put:

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:

#all{
    width:400px;
    margin-left: auto;
    margin-right: auto;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top