CODEWITHSUNDEEP
htmlcss
user4163224
user4163224

Reputation:

Making 3 boxes centralized

I make this 3 box with css + html -> https://i.sstatic.net/X7QDh.png

Code:

                <div class="row">
                    <div class=".col-md-6">
                        <div class="box">OPEN BAR + DRINKING GAMES</div><span></span>
                        <div class="box">CONHECER VÁRIOS BARES E BALADAS EM UMA DAS MAIORES CIDADES DO MUNDO</div><span></span>
                        <div class="box">CONHECER PESSOAS</div><span></span>
                    </div>
                </div>


#about .box {
  background-color: transparent;
  border: 1px solid white;
  width: 250px;
  height: 350px;
  display: inline-block;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-right: 20px;
}

I want know why the middle box is more up than others.

UPDATE:

know i'm using the correct grid system:

                <div class="row">
                     <div class="col-md-4 box">OPEN BAR + DRINKING GAMES</div>
                     <div class="col-md-4 box">CONHECER VÁRIOS BARES E BALADAS EM UMA DAS MAIORES CIDADES DO MUNDO</div>
                     <div class="col-md-4 box">CONHECER PESSOAS</div>
                 </div>

and

#about .box {
  background-color: transparent;
  border: 1px solid white;
  width: 250px;
  height: 350px;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-right: 140px;
}

But its not centralized yet

-> https://i.sstatic.net/6Of3i.png

Upvotes: 0

Views: 59

Answers (1)

Sven Tschui
Sven Tschui

Reputation: 1425

If you have the display: inline-block; the boxes will be vertically aligned to the baseline. See http://quirksmode.org/css/css2/display.html#inlineblock for further information.

From your code I guess you're using bootstrap. Use the bootstraps grid:

           <div class="row">
                <div class="col-md-4 box">OPEN BAR + DRINKING GAMES</div>
                <div class="col-md-4 box">CONHECER VÁRIOS BARES E BALADAS EM UMA DAS MAIORES CIDADES DO MUNDO</div>
                <div class="col-md-4 box">CONHECER PESSOAS</div>
            </div>

.box {
  background-color: transparent;
  border: 1px solid white;
  height: 350px;
  margin-top: 50px;
  margin-bottom: 50px;
}

Update:

Wrap your .row div into another one with class "container" to horziontally center it. Read the bootstrap docs for further information: http://getbootstrap.com/css/#grid

Upvotes: 1

Related Questions