CODEWITHSUNDEEP
htmlcssflexboxcss-position
ItFreak
ItFreak

Reputation: 2369

CSS flex layout in absolute container

I have the following HTML/CSS that has a container (.full-width.section3) which has an absolute height. However, centering the content within does not work. Since I am new to the flex model, could someone explain to me, why the three child divs are not centered vertically?

body {
  margin:0;
  
}
.container {
  display:flex;
  flex-wrap:wrap;     
  height:100vh;
  background-color: white;
}
.full-width {
  width:100%;              
}

.full-width.section3{
	height: 795px;
}

.full-width > .content > .third-parent{
  height: 100%;
  display: flex;
}

.full-width > .content > .third-parent > .third{
  position: relative;
  flex: 1 1 0px;
  width: 100%;
  border: 1px solid black;
}

.full-width > .content > .third-parent > .third > img{
  position: absolute;
  width: 100%;
  height: auto;
  left: 50%;
  top:50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.middle-text{
  position: absolute;
  width: 100%;
  left: 50%;
  top:50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


.full-width > .content > .third-parent > .third > .middle-text > .list-div2{
    display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.full-width > .content > .third-parent > .third > .middle-text > .list-div2  li{
   position: relative;
  display: block;
  margin-bottom: 5px;
  padding: 10px;
  text-align: left;
  text-transform: uppercase;
  visibility: visible;
}

.list-div2 li::before{
  content: '\2022';
  margin-right: 10px;
}
.items-list2 {
  margin: 0;
  padding: 0;
}
<div class="container">
<div class="full-width section3">
    <div class="content">
       <div class="third-parent">
         <div class="third" id="one">
           <img src="https://fakeimg.pl/350x200/?text=right">
          </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1>Some headline</h1>
                  <div class="list-div2">
        <ul class="items-list2" id="list">
          <li>Entry A</li>
          <li>Entry B</li>
          <li>Entry C</li>
          <li>Entry D</li>
        </ul>
      </div>
          </div>
        </div>
        <div class="third" id="three">
          <img src="https://fakeimg.pl/350x200/?text=left">
        </div>
         </div>
       </div>
</div>
</div>

Upvotes: 1

Views: 2293

Answers (3)

Anduel
Anduel

Reputation: 11

You need to remove position: absolute; to class middle-text and add display: inline; to centered the middle column

body {
  margin:0;
  
}
.container {
  display:flex;
  flex-wrap:wrap;     
  height:100vh;
  background-color: white;
}
.full-width {
  width:100%;              
}

.full-width.section3{
	height: 795px;
}

.full-width > .content > .third-parent{
  height: 100%;
  display: flex;
}

.full-width > .content > .third-parent > .third{
  position: relative;
  flex: 1 1 0px;
  width: 100%;
  border: 1px solid black;
}

.full-width > .content > .third-parent > .third > img{
  position: absolute;
  width: 100%;
  height: auto;
  left: 50%;
  top:50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.middle-text{
  width: 100%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: auto;
  display: inline;
}


.full-width > .content > .third-parent > .third > .middle-text > .list-div2{
    display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.full-width > .content > .third-parent > .third > .middle-text > .list-div2  li{
   position: relative;
  display: block;
  margin-bottom: 5px;
  padding: 10px;
  text-align: left;
  text-transform: uppercase;
  visibility: visible;
}

.list-div2 li::before{
  content: '\2022';
  margin-right: 10px;
}
.items-list2 {
  margin: 0;
  padding: 0;
}
<div class="container">
<div class="full-width section3">
    <div class="content">
       <div class="third-parent">
         <div class="third" id="one">
           <img src="https://fakeimg.pl/350x200/?text=right">
          </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1>Some headline</h1>
                  <div class="list-div2">
        <ul class="items-list2" id="list">
          <li>Entry A</li>
          <li>Entry B</li>
          <li>Entry C</li>
          <li>Entry D</li>
        </ul>
      </div>
          </div>
        </div>
        <div class="third" id="three">
          <img src="https://fakeimg.pl/350x200/?text=left">
        </div>
         </div>
       </div>
</div>
</div>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115353

I'm not quite clear on what it is you are trying to achieve but flex layout does not lend itself to absolute positioned children

If centering is the issue then there are option available to you in flexbox.

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


body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  background-color: white;
}

.full-width {
  width: 100%;
}

.full-width.section3 {
  height: 795px;
}

.full-width>.content>.third-parent {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  text-align: center;
}

.full-width>.content>.third-parent>.third {
  position: relative;
  flex: 1 1 0px;
  width: 100%;
  border: 1px solid black;
}

.full-width>.content>.third-parent>.third>img {
  max-width: 100%;
  display: block;
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 li {
  position: relative;
  display: block;
  margin-bottom: 5px;
  padding: 10px;
  text-align: left;
  text-transform: uppercase;
  visibility: visible;
}

.list-div2 li::before {
  content: '\2022';
  margin-right: 10px;
}

.items-list2 {
  margin: 0;
  padding: 0;
}
<div class="container">
  <div class="full-width section3">
    <div class="content">
      <div class="third-parent">
        <div class="third" id="one">
          <img src="https://fakeimg.pl/350x200/?text=right">
        </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1>Some headline</h1>
            <div class="list-div2">
              <ul class="items-list2" id="list">
                <li>Entry A</li>
                <li>Entry B</li>
                <li>Entry C</li>
                <li>Entry D</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="third" id="three">
          <img src="https://fakeimg.pl/350x200/?text=left">
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Katinka Hesselink
Katinka Hesselink

Reputation: 4183

You're mixing flex with absolute positioning. This breaks flex for children elements:

As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.

source: https://www.w3.org/TR/css-flexbox-1/#abspos-items

Upvotes: 6

Related Questions