垂直对齐：多行文本之后

Question

我有一个物品清单。一个项目有一个标题和文本。在文本之后我想要一个 'checked icon'。此图标必须右对齐并位于文本的中间。

现在的问题是图标在文本底部对齐；

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

Answer 1

嘿，您可以使用 display:flex 和 align-items: center 将图标垂直居中对齐。请查看以下代码并输出它会对您有所帮助。

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

垂直对齐：多行文本之后

vertical align :after with multi line text

html

css

vertical-alignment

css-content