CODEWITHSUNDEEP
css
overexchange
overexchange

Reputation: 1

How to center multiple divs in center?

How to align these boxes in top middle of viewport? Without using flex property, Can these boxes be centered?

div.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 10px margin: auto;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
}
div.div1 {
  background: -moz-linear-gradient(left, red, green);
  background: -webkit-linear-gradient(left, red, green);
  background: -ms-linear-gradient(left, red, green);
  background: -o-linear-gradient(left, red, green);
  background: linear-gradient(left, red, green);
}
div.div2 {
  background: -moz-radial-gradient(top, circle, red, yellow, green);
  background: -webkit-radial-gradient(top, circle, red, yellow, green);
  background: -ms-radial-gradient(top, circle, red, yellow, green);
  background: -o-radial-gradient(top, circle, red, yellow, green);
  background: radial-gradient(top, circle, red, yellow, green);
}
div.div3 {
  background: -moz-radial-gradient(top, ellipse, red, yellow, green);
  background: -webkit-radial-gradient(top, ellipse, red, yellow, green);
  background: -ms-radial-gradient(top, ellipse, red, yellow, green);
  background: -o-radial-gradient(top, ellipse, red, yellow, green);
  background: radial-gradient(top, ellipse, red, yellow, green);
}
<div class="box div1">Box</div>
<div class="box div2">Box</div>
<div class="box div3">Box</div>

Upvotes: 0

Views: 55

Answers (3)

Raza Hussain
Raza Hussain

Reputation: 762

Instead of body you should wrap all 3 divs to a main div See updated code here:

 <div class='main'>
   <div class="box div1">Box</div>
   <div class="box div2">Box</div>
   <div class="box div3">Box</div>  
</div>

div.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 10px margin: auto;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
}
div.div1 {
  background: -moz-linear-gradient(left, red, green);
  background: -webkit-linear-gradient(left, red, green);
  background: -ms-linear-gradient(left, red, green);
  background: -o-linear-gradient(left, red, green);
  background: linear-gradient(left, red, green);
}
div.div2 {
  background: -moz-radial-gradient(top, circle, red, yellow, green);
  background: -webkit-radial-gradient(top, circle, red, yellow, green);
  background: -ms-radial-gradient(top, circle, red, yellow, green);
  background: -o-radial-gradient(top, circle, red, yellow, green);
  background: radial-gradient(top, circle, red, yellow, green);
}
div.div3 {
  background: -moz-radial-gradient(top, ellipse, red, yellow, green);
  background: -webkit-radial-gradient(top, ellipse, red, yellow, green);
  background: -ms-radial-gradient(top, ellipse, red, yellow, green);
  background: -o-radial-gradient(top, ellipse, red, yellow, green);
  background: radial-gradient(top, ellipse, red, yellow, green);
}
.main{
  text-align:center;
}

Upvotes: 2

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Set a container with the rule text-align: center;

HTML

<div class="text-center">
    <div class="box div1">Box</div> 
    <div class="box div2">Box</div>
    <div class="box div3">Box</div>
</div>

CSS

.text-center{
display: block;
text-align: center;
}

Upvotes: 1

j08691
j08691

Reputation: 207861

Sure, you can just add:

body {
  text-align: center
}


body {
  text-align: center
}
div.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 10px margin: auto;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
}
div.div1 {
  background: -moz-linear-gradient(left, red, green);
  background: -webkit-linear-gradient(left, red, green);
  background: -ms-linear-gradient(left, red, green);
  background: -o-linear-gradient(left, red, green);
  background: linear-gradient(left, red, green);
}
div.div2 {
  background: -moz-radial-gradient(top, circle, red, yellow, green);
  background: -webkit-radial-gradient(top, circle, red, yellow, green);
  background: -ms-radial-gradient(top, circle, red, yellow, green);
  background: -o-radial-gradient(top, circle, red, yellow, green);
  background: radial-gradient(top, circle, red, yellow, green);
}
div.div3 {
  background: -moz-radial-gradient(top, ellipse, red, yellow, green);
  background: -webkit-radial-gradient(top, ellipse, red, yellow, green);
  background: -ms-radial-gradient(top, ellipse, red, yellow, green);
  background: -o-radial-gradient(top, ellipse, red, yellow, green);
  background: radial-gradient(top, ellipse, red, yellow, green);
}
<div class="box div1">Box</div>
<div class="box div2">Box</div>
<div class="box div3">Box</div>

Upvotes: 1

Related Questions