'align text in between two div with postioning

I am trying to create a progression section, where i have a text, image and progression. I am able to achieve this but the problem here is that i want the image section and text should be vertical middle align to the parent div.

Is there a way i can use flex instead of relative and absolute.

.progress-bar-container {
  background-color: #33cc33;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 1;
  height: 40px;
}

img {
  width: 20px;
  height: 20px;
}

.progress-info-wrapper {
  position: absolute;
}

.text-wrapper {
  color: #263238;
  margin-left: 8px;
}

.progress {
  height: 40px;
  width: 11%;
  background-color: #99ff99;
}
<div class="progress-bar-container">
  <div class="progress-info-wrapper">
    <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
      alt="test-img"><span class="text-wrapper">Add more items to get offer</span></div>
  <div class="progress"></div>
</div>
htmlcss


Solution 1:[1]

You mean something like that? Add some flex properties to your .progress-info-wrapper class.

.progress-info-wrapper {
  position: absolute;
  display:flex;
  align-items: center;
  height: 100%;
}


.progress-bar-container {
  background-color: #33cc33;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 1;
  height: 40px;  
}

.progress-info-wrapper {
  position: absolute;
  display:flex;
  align-items: center;
  height: 100%;
}

img {
  width: 20px;
  height: 20px;
}



.text-wrapper {
  color: #263238;
  margin-left: 8px;  
}

.progress {
  height: 40px;
  width: 11%;
  background-color: #99ff99;
}
<div class="progress-bar-container">
  <div class="progress-info-wrapper">
    <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
      alt="test-img"><span class="text-wrapper">Add more items to get offer</span></div>
  <div class="progress"></div>
</div>

Solution 2:[2]

To vertically align your image and text, you should use flexbox in progress-info-wrapper

.progress-bar-container {
  background-color: #33cc33;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 1;
  height: 40px;
}

img {
  width: 20px;
  height: 20px;
}

.progress-info-wrapper {
  position: absolute;
  display: flex;
  align-items: center;
  height: 100%;
}

.text-wrapper {
  color: #263238;
  margin-left: 8px;
}

.progress {
  height: 40px;
  width: 11%;
  background-color: #99ff99;
}
<div class="progress-bar-container">
  <div class="progress-info-wrapper">
    <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
      alt="test-img"><span class="text-wrapper">Add more items to get offer</span></div>
  <div class="progress"></div>
</div>

Solution 3:[3]

Flex would help you with layout deciding how the items will need to be positioned next to each other but not over each other.

In that case position:absolute still fits better. To center the element you need the magic of margin: auto but you should give your element an height using fit-content.

Here's your demo with the .progress-info-wrapper css rules changed as:

.progress-info-wrapper {
  position: absolute;
  margin: auto; 
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: fit-content;
}


.progress-bar-container {
  background-color: #33cc33;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 1;
  height: 40px;
}

img {
  width: 20px;
  height: 20px;
}

.progress-info-wrapper {
  position: absolute;
  margin: auto; 
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: fit-content;
}

.text-wrapper {
  color: #263238;
  margin-left: 8px;
}

.progress {
  height: 40px;
  width: 11%;
  background-color: #99ff99;
}
<div class="progress-bar-container">
  <div class="progress-info-wrapper">
    <img
      src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
      alt="test-img">
        <span class="text-wrapper">Add more items to get offer</span>
  </div>
  <div class="progress"></div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Nick Vu
Solution 3 Diego De Vita

Related Questions