CODEWITHSUNDEEP
htmlcss
richersoon
richersoon

Reputation: 4902

Center element vertically and new element should be added in new line

Center element vertically and new element should be added in the next line (without using <br/>)

.parent { 
    position: relative;
    background: #FF0000;
    text-align: left;
    width: 100%;
    height: 200px;
    text-align: center;
    vertical-align: middle;
    }
.children { 
    background: #000;
    width: 10%;
    height: 200px;
    display: inline-block; 
    position: relative;
    vertical-align: middle;
    }

Jsfiddle is in here: http://jsfiddle.net/richersoon/m8kp92yL/5/

Result should be something like this

enter image description here

Upvotes: 0

Views: 45

Answers (2)

Daniel Mata
Daniel Mata

Reputation: 21

I would make things easy by changing the boxes to display: flex; and making the .parent class height: auto; then adding the appropriate margins and padding like so.

.parent { 
     position: relative;
     background: #FF0000;
     text-align: left;
     width: 100%;
     height: auto;
     text-align: center;
     vertical-align: middle;
     padding: 5px;
}
.children { 
     background: #000;
     width: 200px;
     height: 200px;
     display: flex; 
     position: relative;
     vertical-align: middle;
     margin: auto;
     margin-top: 3px;
}
<div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

Upvotes: 2

cosmoonot
cosmoonot

Reputation: 2189

You need to modify .parent to have a height:auto; to accommodate the height of each .children element and padding:20px 0; was added to show 20px worth of red background above the first child.

In your .children css display:inline-block was removed and margin: 0 auto allows each child to center within .parent element, after each child element margin-bottom:5px; displays the 5px gap.

.parent { 
    position: relative;
    background: #FF0000;
    text-align: left;
    width: 100%;
    height: auto;
    text-align: center;
    vertical-align: middle;
    padding:20px 0px;    
    }
.children { 
    background: #000;
    width: 200px;
    height: 200px;    
    position: relative;
    vertical-align: middle;    
    display:flex;
    margin: 0 auto;
    margin-bottom:5px;    
    }
<div class="parent">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>

Upvotes: 2

Related Questions