Attempting to position text and an icon using HTML and CSS

Question

Attempting to position text and an icon using HTML and CSS

My current challenge involves aligning an icon with some text, but I'm facing this issue:

https://i.sstatic.net/dGi1W.png

The desired alignment is not matching up, and instead it looks like this:

https://i.sstatic.net/BLsie.png

.percent {
  float: right;
  display: inline-block;
  position: relative;
}

.card-icon {
  float: left;
}

<div class="col-md-4">
  <div class="card">
    <div class="card-header" id="blue">
      <p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
    </div>
    <p class="percent"> <img class="card-icon" src="app/assets/images/self.png" alt="Smiley face"> 1% </p>

EDIT ****

After trying the solution provided in the previous answer, the outcome displays as follows: https://i.sstatic.net/YbMyZ.png

html css

Answer 1

Answer №1

.card-icon {float: left;margin-right:10px; }

    <style type="text/css">
     
    </style>
    <div class="col-md-4">
    <div class="card">
    <div class="card-header" id="blue">
    <p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
    </div>
    <div class = "percent">
    <img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
    <div class="card-txt"> 1% </div>
    </div>
    </div>
    </div>

Answer 2

.card-icon {float: left;margin-right:10px; }

    <style type="text/css">
     
    </style>
    <div class="col-md-4">
    <div class="card">
    <div class="card-header" id="blue">
    <p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
    </div>
    <div class = "percent">
    <img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
    <div class="card-txt"> 1% </div>
    </div>
    </div>
    </div>

Answer 3

Answer №2

Consider utilizing inline-block instead of using floats:

.card-icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 1;
}

.card-icon:after {
  content: "=";
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
}

.percent .card-txt:nth-of-type(1) {
  text-align: center;
}

.card-txt {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin-left: 24px;
}

.block {
  display: block;
}

<div class="col-md-4">
  <div class="card">
    <div class="card-header" id="blue">
      <p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
    </div>
    <div class="percent">
      <img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
      <div class="card-txt">
        <span class="block">1%</span>
        <span class="block">service tax + VAT</span>
      </div>
    </div>
  </div>
</div>

Answer 4

Consider utilizing inline-block instead of using floats:

.card-icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 1;
}

.card-icon:after {
  content: "=";
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
}

.percent .card-txt:nth-of-type(1) {
  text-align: center;
}

.card-txt {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin-left: 24px;
}

.block {
  display: block;
}

<div class="col-md-4">
  <div class="card">
    <div class="card-header" id="blue">
      <p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
    </div>
    <div class="percent">
      <img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
      <div class="card-txt">
        <span class="block">1%</span>
        <span class="block">service tax + VAT</span>
      </div>
    </div>
  </div>
</div>

Answer 5

Answer №3

There's wisdom in simplicity, and sometimes the best solution is an old one. HTML tables provide a reliable way to control vertical height with broad browser support and backward compatibility. This method also ensures responsiveness, unlike other techniques that may falter when adjusting browser window size.

table {
  margin: 0 auto;
  border: 1px solid blue;
}

table tr td {
  padding: 10px;
  width: 100px;
  text-align: center;
  vertical-align: middle;
  position: relative;
}

table tr .number-cell {
  padding-top:10px;
  width: 80px;  
}

table tr .number-cell .value {
  margin-top: 4px;
    font-size: 42px;
}

table tr .number-cell .sub-heading {
  background: grey
}

table tr .equal-cell {
  width: 0px;
}

table tr td img {
  width: 100%;
}

<div>
  <h1>MY WEBSITE</h1>
  
  <table>
    <tr>
    
      <td class="image-cell">
        <img src="https://www.fillmurray.com/100/100"/>
      </td>
      
      <td class="equal-cell"> 
        <span class="equal">=</span>
      </td>
      
      <td class="number-cell">
        <div class="value">1%</div>
        <div class="sub-heading">service fee</div>
      </td>
      
    </tr>
  </table>
 
</div>

Answer 6

There's wisdom in simplicity, and sometimes the best solution is an old one. HTML tables provide a reliable way to control vertical height with broad browser support and backward compatibility. This method also ensures responsiveness, unlike other techniques that may falter when adjusting browser window size.

table {
  margin: 0 auto;
  border: 1px solid blue;
}

table tr td {
  padding: 10px;
  width: 100px;
  text-align: center;
  vertical-align: middle;
  position: relative;
}

table tr .number-cell {
  padding-top:10px;
  width: 80px;  
}

table tr .number-cell .value {
  margin-top: 4px;
    font-size: 42px;
}

table tr .number-cell .sub-heading {
  background: grey
}

table tr .equal-cell {
  width: 0px;
}

table tr td img {
  width: 100%;
}

<div>
  <h1>MY WEBSITE</h1>
  
  <table>
    <tr>
    
      <td class="image-cell">
        <img src="https://www.fillmurray.com/100/100"/>
      </td>
      
      <td class="equal-cell"> 
        <span class="equal">=</span>
      </td>
      
      <td class="number-cell">
        <div class="value">1%</div>
        <div class="sub-heading">service fee</div>
      </td>
      
    </tr>
  </table>
 
</div>

Answer 7

Answer №4

.card-icon {float: left;position:relative;z-index:1; }
.card-icon:after {content:"=";position:relative; left:25px;}
.percent .card-txt:nth-of-type(1) {text-align:center;position:relative; left:-55px;}
.card-txt {text-align:center; width:400px;background:#ddd;}

  <div class="col-md-4">
      <div class="card">
          <div class="card-header" id="blue">
              <p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
          </div>
          <div class = "percent">
              <img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
              <div class="card-txt"> 1% </div>
              <div class="card-txt"> service tax + VAT </div>
          </div>
      </div>
  </div>

Answer 8

.card-icon {float: left;position:relative;z-index:1; }
.card-icon:after {content:"=";position:relative; left:25px;}
.percent .card-txt:nth-of-type(1) {text-align:center;position:relative; left:-55px;}
.card-txt {text-align:center; width:400px;background:#ddd;}

  <div class="col-md-4">
      <div class="card">
          <div class="card-header" id="blue">
              <p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
          </div>
          <div class = "percent">
              <img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
              <div class="card-txt"> 1% </div>
              <div class="card-txt"> service tax + VAT </div>
          </div>
      </div>
  </div>

Answer 9

Answer №5

To have more control, you can utilize flex styling. Here's an example:

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  
  margin: 0;
  padding: 0;
  
  width: 500px;
}
.card-header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  
  padding: 10px;
  
  background-color: blue;
  color: white;
  font-size: 24px;
}
.card-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  
  background-color: gray;
}
.card-header > img {
  position: absolute;
  right: 0;
  width: 50px;
  height: 50px;
}

<div class="card">
   <div class="card-header">
     <span>Self Managed</span>
     <img src="app/assets/images/star.png" alt="">
  </div>
  <div class="card-content">
    <img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
    <span>1%</span>
  </div>
</div>

Answer 10

To have more control, you can utilize flex styling. Here's an example:

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  
  margin: 0;
  padding: 0;
  
  width: 500px;
}
.card-header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  
  padding: 10px;
  
  background-color: blue;
  color: white;
  font-size: 24px;
}
.card-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  
  background-color: gray;
}
.card-header > img {
  position: absolute;
  right: 0;
  width: 50px;
  height: 50px;
}

<div class="card">
   <div class="card-header">
     <span>Self Managed</span>
     <img src="app/assets/images/star.png" alt="">
  </div>
  <div class="card-content">
    <img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
    <span>1%</span>
  </div>
</div>

Attempting to position text and an icon using HTML and CSS

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The page scroll disappears once the jQuery dialog is closed

Establish a minimum width requirement for a Bootstrap4 webpage and ensure that scrollbars are visible

The content displayed on body.innerHTML does not match the information found in the page source code

Unable to assign unique identifiers to elements within a user interface framework

Certain HTML elements on the webpage are not functioning properly when attempting to incorporate a div tag

Ways to incorporate a dynamic value into a chart created with chart.js?

What could be causing this issue? Do you think I'm headed in the right direction?

Saving the content of a div as a PDF

How to Implement Screenreader and Ontab Functionality for Hover Visibility Accessibility

Overlapping input labels in Angular MaterializeCSS

What is the best way to achieve this state using jQuery?

What is the best way to extract the contents of a textarea and save them to a separate JavaScript file

"Exploring the Functionality of Dropdown Menus in ASP.NET Core 1

Experiencing an overflow of redirects in PHP contact form

Stealthy Google Recaptcha integrated with a dynamic AJAX form

The content box is not aligning properly with the content inside, causing it to vanish instead of overflowing with

Issues with the alignment of columns using Bootstrap framework

Vertical alignment using Bootstrap buttons for pull-up and pull-down functionality

Add a border-bottom with varying widths to the div or span element

The MVC5 model is unable to retrieve the text value entered in the textbox