Center content vertical in flexbox? [closed]-CodePudding

Closed. This question needs

CodePudding user response：

Wrap your pagination content inside a <p>. Remove the following lines for the wrapper div

flex-wrap: wrap;
align-content: last baseline;

Set margin-right:10px for the pagination then you're all set to go.

body{ 
  font-size:16px;
}
.bg1{ 
  background-color:#ddd;
}
.bg2{ 
  background-color:#999;
}
.header{ 
  max-width:100%;
}
.wrapper, .controlls {
  display: flex;
  justify-content: center;
}
.sub_controll_2_wrapper {
  display: flex;
  flex-wrap: wrap;
}
.pagination,.controll_1,.controll_2,.controll_3{ 
  padding: 15px;
 }
.pagination{ 
  max-width:340px;
  margin-right:10px;
}
.controll_1{ 
  max-width:100%;
}
.controll_2{ 
  max-width:100%;
}
.controll_3{ 
  max-width:100%;
}
.controll_1,.controll_2{ 
  margin-right:10px;
}
.controll_3{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  
}
.controll_3_content{ 
  margin-right:10px;
  background-color: #777;
}
@media (max-width: 1366px){ 
  body{ 
    font-size:14px;
  }
  .pagination,.controll_1,.controll_2,.controll_3{ 
    padding: 10px;
 }
}

<div class="header">
<div class="wrapper">
  <div class="bg1 pagination">
    <p>Site 1 / Subsite 1 / Subsubsite 1</p>
  </div>
  <div class="controlls">
    <div class="bg2 controll_1">
      <div class="bg2 sub_controll_1">
        <select name="cars" id="cars">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select> 
      </div>
      <div class="bg2 sub_controll_2_wrapper">
          <div class="bg2 sub_controll_2">
            <input type="search" id="search" name="search" placeholder="search">
          </div>
          <div class="bg2 sub_controll_3"> 
            <button type="button">Click Me 1</button> </div>
          <div class="bg2 sub_controll_4">
             <button type="button">Click Me 2</button> 
          </div>
      </div>
    </div>
    <div class="bg2 controll_2">Status 1 <br>Status 2 <br>Status 3</div>
    <div class="bg2 controll_3">
      <div class="controll_3_content">
      Content 1
      </div>
      <div class="controll_3_content">
      Content 2
      </div>
      <div class="controll_3_content">
      Content 3
      </div>
      <div class="controll_3_content">
      Content 4 with longer text
      </div>
    </div>
  </div>
</div>
</div>

Now you will have all boxes in same height. PS open it in full screen view to view the result.

codepen here

CodePudding user response：

body{ 
  font-size:16px;
}
.bg1{ 
  background-color:#ddd;
}
.bg2{ 
  background-color:#999;
}
.header{ 
  max-width:100%;
}
.wrapper, .controlls {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;

}
.sub_controll_2_wrapper {
  display: flex;
  flex-wrap: wrap;
}
.pagination,.controll_1,.controll_2,.controll_3{ 
  padding: 0 15px;
 }
.pagination{ 
  max-width:340px;
  margin:10px auto;
}
.controll_1{ 
  max-width:100%;
}
.controll_2{ 
  max-width:100%;
}
.controll_3{ 
  max-width:100%;
}
.controll_1,.controll_2{ 
  margin-right:10px;
}
.controll_3{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  
}
.controll_3_content{ 
  margin-right:10px;
  background-color: #777;
}
@media (max-width: 1366px){ 
  body{ 
    font-size:14px;
  }
  .pagination,.controll_1,.controll_2,.controll_3{ 
    padding: 10px;
 }
}

<div class="header">
<div class="wrapper">
  <div class="bg1 pagination">Site 1 / Subsite 1 / Subsubsite 1</div>
  <div class="controlls">
    <div class="bg2 controll_1">
      <div class="bg2 sub_controll_1">
        <select name="cars" id="cars">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select> 
      </div>
      <div class="bg2 sub_controll_2_wrapper">
          <div class="bg2 sub_controll_2">
            <input type="search" id="search" name="search" placeholder="search">
          </div>
          <div class="bg2 sub_controll_3"> 
            <button type="button">Click Me 1</button> </div>
          <div class="bg2 sub_controll_4">
             <button type="button">Click Me 2</button> 
          </div>
      </div>
    </div>
    <div class="bg2 controll_2">Status 1 <br>Status 2 <br>Status 3</div>
    <div class="bg2 controll_3">
      <div class="controll_3_content">
      Content 1
      </div>
      <div class="controll_3_content">
      Content 2
      </div>
      <div class="controll_3_content">
      Content 3
      </div>
      <div class="controll_3_content">
      Content 4 with longer text
      </div>
    </div>
  </div>
</div>
</div>

Is this what u want?

CodePudding user response：

I added the following to my boxes and it worked:

  justify-content: center;
  align-items: center;

CodePudding user response：

Add this to .pagination to vertically center :

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

And add this to .controll_1 to horizontal center it :

  display:flex;
  flex-flow:column;
  justify-content:center;
  align-items:center;

Also remove the margin-right: 10px property from .controll_3_content .
Instead use margin: 10px so that it don't distort position from one side only .
Now margin is applied on both sides , so total margin will be 10px 10px . If you want only 10px than use margin: 5px

Here is a working example :

body {
  font-size: 16px;
}

.bg1 {
  background-color: #ddd;
}

.bg2 {
  background-color: #999;
}

.header {
  max-width: 100%;
}

.wrapper,
.controlls {
  display: flex;
  flex-wrap: wrap;
  align-content: last baseline;
}

.sub_controll_2_wrapper {
  display: flex;
  flex-wrap: wrap;
}

.pagination,
.controll_1,
.controll_2,
.controll_3 {
  padding: 0 15px;
}

.pagination {
  max-width: 340px;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.controll_1 {
  max-width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.controll_2 {
  max-width: 100%;
}

.controll_3 {
  max-width: 100%;
}

.controll_1,
.controll_2 {
  margin-right: 10px;
}

.controll_3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.controll_3_content {
  margin: 5px;
  background-color: #777;
}

@media (max-width: 1366px) {
  body {
    font-size: 14px;
  }
  .pagination,
  .controll_1,
  .controll_2,
  .controll_3 {
    padding: 10px;
  }
}

<div class="header">
  <div class="wrapper">
    <div class="bg1 pagination">Site 1 / Subsite 1 / Subsubsite 1</div>
    <div class="controlls">
      <div class="bg2 controll_1">
        <div class="bg2 sub_controll_1">
          <select name="cars" id="cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
          </select>
        </div>
        <div class="bg2 sub_controll_2_wrapper">
          <div class="bg2 sub_controll_2">
            <input type="search" id="search" name="search" placeholder="search">
          </div>
          <div class="bg2 sub_controll_3">
            <button type="button">Click Me 1</button> </div>
          <div class="bg2 sub_controll_4">
            <button type="button">Click Me 2</button>
          </div>
        </div>
      </div>
      <div class="bg2 controll_2">Status 1 <br>Status 2 <br>Status 3</div>
      <div class="bg2 controll_3">
        <div class="controll_3_content">
          Content 1
        </div>
        <div class="controll_3_content">
          Content 2
        </div>
        <div class="controll_3_content">
          Content 3
        </div>
        <div class="controll_3_content">
          Content 4 with longer text
        </div>
      </div>
    </div>
  </div>
</div>

Page link：https//www.codepudding.com/frontend/132798.html

Prev:Looking for the best way to add an icon to a button on css [duplicate]

Next:Show no border on focus of an input field

Tags：

css

Links：
CodePudding