0

I need to have 6 relatively position divs as clickable buttons, 3 up and 3 down with specific text inside. The problem is - when I write 2 or 3 long words (they take long width) some of the buttons go up or down. I know this is problem with the "display:inline-block".

HTML

<div class="Box_parent">
<a><div id="Box_button"> <div class="box_text">  TEST  </div> </div></a> 
<a><div id="Box_button"> <div class="box_text"> TEST   </div> </div></a> 
<a><div id="Box_button"> <div class="box_text">  REALLY REALLY REALLY LONG TEST </div> </div> </a> 
<a><div id="Box_button"> <div class="box_text">  TEST  </div> </div> </a> 
<a><div id="Box_button"> <div class="box_text">  REALLY REALLY REALLY LONG TEST  </div> </div> </a> 
<a><div id="Box_button"> <div class="box_text">  TEST  </div> </div> </a> 
</div>

CSS

#Box_button{
height:300px;
width:300px;
background-color:#4286f4;
margin:15px 15px;
display: inline-block;
}

.box_text{
font-family:Arial;
color:white;
font-size:30px;
}

.Box_parent{
position:relative;
text-align:center;  
max-width:1300px;
margin:auto;
margin-top:130px;
vertical-align: bottom;
}
Valio Raltchev
  • 113
  • 2
  • 13

1 Answers1

4

Add vertical-align to the element that is inline-block.

#Box_button{
height:300px;
width:300px;
background-color:#4286f4;
margin:15px 15px;
display: inline-block;
vertical-align: middle;
}

On a side note, id should be unique on the page. You might want to change the box_button to be a class.

vicbyte
  • 3,690
  • 1
  • 11
  • 20
  • Amazing! Thanks! If you can tell me how can I margin this text so it can be centered in the box, I would be really grateful! – Valio Raltchev Nov 25 '17 at 22:00
  • Thats a separate question, that has been answered multiple times already. For ex. here: https://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div – vicbyte Nov 25 '17 at 22:02
  • I found it out myself accidentally, thank you either way! :D – Valio Raltchev Nov 25 '17 at 22:03