Sanjeev K Sanjeev K - 1 month ago 8
CSS Question

How to make two div with centered in two lines

I have two block (DIV) and both are centered to the screen, and I want to keep those blocks vertical line by line as per the attachment, please note that parent div is in

display:flex


enter image description here



.wrapper{
width:100%;
float:left;
background:#ccc;
align-items: center;
display: flex;
}
.div1 {
margin: 10px auto;
width: 300px;
border: 1px solid #000;
background: #fff;
}
.div2 {
margin: 10px auto;
width: 300px;
border: 1px solid #000;
background: #fff;
}

<div class="wrapper">
<div class="div1"> Block 1 </div>
<div class="div2"> Block 2 </div>
</div>




Answer

As you are using a flexbox change the flex-axis to vertical using flex-direction: column.

See snippet below:

.wrapper {
  width: 100%;
  float: left;
  background: #ccc;
  align-items: center;
  display: flex;
  flex-direction: column;
}
.div1 {
  margin: 10px auto;
  width: 300px;
  border: 1px solid #000;
  background: #fff;
}
.div2 {
  margin: 10px auto;
  width: 300px;
  border: 1px solid #000;
  background: #fff;
}
<div class="wrapper">
  <div class="div1">Block 1</div>
  <div class="div2">Block 2</div>
</div>