vertical align :after with multi line text

Question

I have a list of items. An item has a title and text. After the text I want a 'checked icon'. This icon must be aligned to the right and in de middle of the text.

The problem now is that the icon is aligned at the bottom of the text;

#main-box {
  padding: 30px;
  -moz-border-radius: .25rem;
  -webkit-border-radius: .25rem;
  border-radius: .25rem;
  background-color: rgba(255, 255, 255, 0.9);
  width: 80%;
  margin: 0 auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.item cl-title {
  font-weight: bold;
  margin-bottom: 15px;
}

.item cl-text {
  font-style: italic;
  font-size: .75rem;
  vertical-align: middle;
}

.item cl-text:after {
  /* content: "\f00c"; */
  /* font: normal normal normal 30px/1 FontAwesome; */
  content: "V";
  color: Green;
  float: right;
}

<div id="main-box">
  <div class="checklist">
    <div class="item">
      <div class="cl-title">title</div>
      <div class="cl-text">some text <br/> some text<br/>
      </div>
      <div class="item">
        <div class="cl-title">title</div>
        <div class="cl-text">some text
        </div>
      </div>
    </div>

I uses font awsesome you need to include that in your project — Babulaas, May 30 '18 at 12:54

score 2 · Accepted Answer · answered May 30 '18 at 12:11

Hey you can use display:flex and align-items: center to align icon vertically middle. Please have a look on following code and output it will help you.

#main-box {
  padding: 30px;
  -moz-border-radius: .25rem;
  -webkit-border-radius: .25rem;
  border-radius: .25rem;
  background-color: rgba(255,255,255,0.9);
  width: 80%;
  margin: 0 auto;
}

.item .cl-title { 
  font-weight: bold; 
  margin-bottom: 15px; 
}
.item .cl-text { 
  font-style: italic;                
  font-size: .75rem;
  display: flex;
  align-items: center;
}

.item .cl-text:after {
  content: "\f00c";
  font: normal normal normal 30px/1 FontAwesome;
  color: Green;
  float: right;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div id="main-box">
    <div class="checklist">
      <div class="item">
         <div class="cl-title">title</div>
         <div class="cl-text">some text <br/> some text<br/>
      </div>
      <div class="item">
         <div class="cl-title">title</div>
         <div class="cl-text">some text
      </div>
    </div>
</div>

thank you. this is what I want. there is just one thing left. how do you align the icon to the right (at the end of the div not right after the text.) — Babulaas, May 30 '18 at 13:06
Well for that you can apply two ways: 1) just add justify-content: space-between; in .item .cl-text class or next choice 2) you can add position: absolute; right: 0; to .item .cl-text:after class — Prabin Sapal, May 30 '18 at 13:11

vertical align :after with multi line text

1 Answers1