Home>

[Question] Flexalign-content: center;Even if you use, you cannot output to the vertical center. Why?


-------------------------------------------------- ------------ ↑ This

-------------------------------------------------- ------------ ↑ I want to do this


      
        
          
        
<!-From here->
        
           At home even on business trips 
        <p>You can rest assured when i am on a business trip or when you move to a new place. Find rooms and boutique hotels that have been rated 5 stars by other business travelers.</p>
           Search for accommodation with work space 
        
<!-I want to align the text so far in the vertical center->
      
  
.contents-wrapper {
  width: 100%;
  height: 1590px;
  margin-top: 60px;
}
.description-container {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: space-evenly;
}
.description-container: nth-child (even) {
  flex-direction: row-reverse;
}
.description-icon {
  width: calc (42% -30px);
  height: calc (100% -20px);
}
.description-icon img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}
.description {
  width: calc (58% -30px);
  height: calc (100% -20px);
  padding-left: 155px;
  padding-right: 155px;
  align-content: center;/* ← This does not work * /
}

that's all, thank you very much.

  • Answer # 1

    For example, how about something like this?

    .description {
      width: calc (58% -30px);
      height: calc (100% -20px);
      padding-left: 155px;
      padding-right: 155px;
      // align-content: center;/* ← This does not work * /
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

  • Answer # 2

    Hello.

    The CSS align-content property isFlexboxIn the direction of the intersection axis or the block axis of the gridHow to distribute the spacing between or around items insideTo set.
    ...
    Single row flex container(That is, flex-wrap: nowrap's), this property isHas no effect..
    align-content --CSS: Cascading Stylesheets | MDN

    So I set it in the flex container andflex-wrap: wrapMust be.

    .description {
        display: flex;
        flex-flow: wrap;
    }

  • Answer # 3

    To the parent elementalign-items: center;Set,.descriptionThere is also a way to not set the height.

    .description-container {
      width: 100%;
      height: 500px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;/* Add * /
    }
    .description {
      width: calc (58% -30px);
    / * height: calc (100% -20px);Delete * /
      padding-left: 155px;
      padding-right: 155px;
    }