Alignment not working

Question

Alright so I was attemping to make these 4 divs inside a div be centered on the screen (both horizonally and vertically) but they are stuck to the upper edge of the <div>. Their position is not going down or anything, they are constantly on top.

/* Footer */
#footer {
     width: 100%;
     height: 400px;
     background-color: red;
     opacity: 0.5;
     text-align: center;
     font-size: 20px;
     letter-spacing: 35px;
     white-space: nowrap;
     line-height: 12px;
     overflow: hidden;
}
    
.arrange {
     width: 20%;
     height: 80%;
     border: solid 1px black;
     display: inline-block;
     vertical-align: middle;
     background-color: white;
}

<div id="footer">
    <div class="arrange"> </div>
    <div class="arrange"> </div>
    <div class="arrange"> </div>
    <div class="arrange"> </div>
</div>

Possible duplicate of [vertical alignment of elements in a div](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) — YakovL, Sep 03 '16 at 00:02

Hastig Zusammenstellen · Answer 1 · 2016-09-03T00:12:05.693

I did up a fiddle with some annotations to show you one method of doing what I think you're wanting to do.

* {
  box-sizing: border-box; /* percentage calculations wont include border width and padding, but margin still messes with it, see calc below */
}
body {
    width: 100vw; 
}
#footer {
    width: 100%;
    height: 400px;
 padding: 40px 5px; /* i added this top padding based on your wanting children to be 80% of parents height. 40 top, 40 bottom */
    background-color: red;
    opacity: 0.5;
    text-align: center;
    line-height: 12px;
    overflow: hidden;
font-size: 0; /* eliminate ghost spaceing after inline blocks */
}

.arrange {
    display: inline-block;
width: calc(25% - 10px); /* width% - margin */
height: 100%; /* 100% of parent minus padding of parent */
margin: 0px 5px; /* spacing, margin accounted for in calc of width, 5left + 5right = 10 */
font-size: 20px; /* reset font size */
    border: solid 1px black;
    background-color: white;
vertical-align: top;
}

<div id="footer">
  <div class="arrange"></div>
  <div class="arrange"></div>
  <div class="arrange"></div>
  <div class="arrange"></div>
</div>

fiddle

https://jsfiddle.net/Hastig/ypfcb2nb/1/

That works great in a way, it works as long as its empty, once I added
inside of it, it went full retard and went other way. — Senior Gamer, Sep 03 '16 at 00:07
@Senior Gamer looks like adding 'vertical-align: top' to '.arrange' will fix it. https://jsfiddle.net/Hastig/ypfcb2nb/1/ — Hastig Zusammenstellen, Sep 03 '16 at 00:11

score 0 · Answer 2 · answered Sep 03 '16 at 00:05

0

you can try this. add this to your code.

display:flex;
justify-content:space-around;
align-items:center;

if you want your boxes to be side by side, change space-around with center.

answered Sep 03 '16 at 00:05

Arda Gok

1
3

score 0 · Answer 3 · answered Sep 03 '16 at 00:09

vertical-align: middle doesn't work for your case, use instead these 3 lines of css for .arrange

position: relative;
top: 50%;
transform: translateY(-50%);

So your final css will be:

#footer {
  width: 100%;
  height: 400px;
  background-color: red;
  opacity: 0.5;
  text-align: center;
  font-size: 20px;
  letter-spacing: 35px;
  white-space: nowrap;
  line-height: 12px;
  overflow: hidden;
}
.arrange {
  width: 20%;
  height: 80%;
  border: solid 1px black;
  display: inline-block;
  position: relative;
  top: 50%;
  -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
  -ms-transform: rotate(7deg); /* IE 9 */
  transform: translateY(-50%);
  background-color: white;
}

score 0 · Answer 4 · answered Sep 03 '16 at 00:10

just add 'padding top' to #footer and 'vertical-align' is no longer needed

<div id="footer">
  <div class="arrange"></div>
  <div class="arrange"></div>
  <div class="arrange"></div>
  <div class="arrange"></div>
</div>

<style>
  #footer {
    padding-top: 90px;
    width: 100%;
    height: 400px;
    background-color: red;
    opacity: 0.5;
    text-align: center;
    font-size: 20px;
    letter-spacing: 35px;
    white-space: nowrap;
    line-height: 12px;
    overflow: hidden;
  }
  .arrange {
    width: 20%;
    height: 80%;
    border: solid 1px black;
    display: inline-block;
    background-color: white;
  }
</style>

Alignment not working

4 Answers4