CODEWITHSUNDEEP
htmlcss
user8819214
user8819214

Reputation:

Trying to align text and an icon html/css

I am trying to align an icon with some text like this:

enter image description here

however it comes out like this:

enter image description here

.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 ****

With the last answer provided it shows up like this: enter image description here

Upvotes: 0

Views: 82

Answers (5)

Jens Ingels
Jens Ingels

Reputation: 816

If you want more controle you can use flex styling. 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>

Upvotes: 0

yjs
yjs

Reputation: 692

.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>

Upvotes: 0

Raina Vachhani
Raina Vachhani

Reputation: 41

.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>

Upvotes: 1

Jack Dalton
Jack Dalton

Reputation: 3681

Sometimes the best solution is an old solution. Using HTML tables allows you to control vertical height with a high level of browser support, and backwards compatibility. Using this approach also make the element responsive. Other solutions that adopt the relative/absolute position method can suffer when resizing 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>

Upvotes: 0

Owl
Owl

Reputation: 26

Try to use inline-block instead of 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>

Upvotes: 0

Related Questions