align text in between two div with postioning-CodePudding

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 >
  <div >
    <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
      alt="test-img"><span >Add more items to get offer</span></div>
  <div ></div>
</div>

CodePudding user response：

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 >
  <div >
    <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
      alt="test-img"><span >Add more items to get offer</span></div>
  <div ></div>
</div>

CodePudding user response：

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 >
  <div >
    <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
      alt="test-img"><span >Add more items to get offer</span></div>
  <div ></div>
</div>

CodePudding user response：

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 >
  <div >
    <img
      src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
      alt="test-img">
        <span >Add more items to get offer</span>
  </div>
  <div ></div>
</div>