Question 372311 in Html Question posted in
Some basic documentation can be found here.

Html – how can I align an image with text in different fonts so that the last text breaks correctly?

I’m having a problem aligning the text with the icon, because the our-numbers-value class has a larger font-size than the our-numbers-text class, so the div ends up growing and the image is aligned with the div.

I used align-items-center in the div with the texts, but when I did that, for some reason, my last text breaks incorrectly, giving me a very unpleasant look.

 .numbers-image {
     width: 30px;
     height: 30px;
     margin-right: 15px;
}
 .flex-align-center {
     display: flex;
     align-items: center;
}
 .text-nowrap {
     white-space: nowrap;
}
 .our-numbers-text {
     color: #061c3d;
     font-weight: 700;
     font-size: 32px;
}
 .our-numbers-value {
     color: #061c3d;
     font-weight: 700;
     font-size: 52px;
}
<div class="flex-align-center">
   <div>
      <img class="numbers-image" src="./assets/svg/paid.svg" alt="" />
   </div>
   <div class="flex-align-center">
      <span class="our-numbers-text text-nowrap">More then</span>
      <span class="our-numbers-value">0</span>
      <span class="our-numbers-text">
      million in sales of air conditioning equipment.
      </span>
   </div>
</div>

current result:

enter image description here

what I expect:

enter image description here

Tags:

2

Answers


  1. 0

    CSS

    .numbers-image {
        width: 30px;
        height: 30px;
        margin-right: 15px;
        /* Align self to flex-start to ensure it aligns with the top of the text */
        align-self: flex-start;
    }
    .flex-align-center {
        display: flex;
        align-items: center;
    }
    .text-nowrap {
        white-space: nowrap;
    }
    .our-numbers-text {
        color: #061c3d;
        font-weight: 700;
        font-size: 32px;
        /* Allow the text to wrap */
        white-space: normal;
    }
    .our-numbers-value {
        color: #061c3d;
        font-weight: 700;
        font-size: 52px;
        /* Align self to flex-start to align with the top of the other text */
        align-self: flex-start;
        margin-right: 5px; /* Added a margin for better spacing */
    }
    /* Added a class to specifically target the container for the values and texts */
    .values-and-texts {
        /* Adjust the alignment as needed, you can try 'baseline' if that looks better */
        align-items: flex-start;
        flex-wrap: wrap; /* This will allow the text to wrap */
    }

    HTML

    <div class="flex-align-center">
  <img class="numbers-image" src="./assets/svg/paid.svg" alt="" />
  <div class="flex-column">
    <div class="flex-align-center">
      <span class="our-numbers-text text-nowrap">More then</span>
      <span class="our-numbers-value">0</span>
    </div>
    <span class="our-numbers-text">
      million in sales of air conditioning equipment.
    </span>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Try to remove the class flex-align-center from the div that is inside the other div with the same class. It should look like this:

    <div class="flex-align-center">
 <div>
  <img class="numbers-image" src="./assets/svg/paid.svg" alt="" />
 </div>
 <div>
  <span class="our-numbers-text text-nowrap">More then</span>
  <span class="our-numbers-value">10</span>
  <span class="our-numbers-text">million in sales of air conditioning equipment.</span>
 </div>
</div>

    This way you have two div items inside a flexbox container.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search