выравнивание по вертикали: после многострочного текста - PullRequest
Новая
       11

выравнивание по вертикали: после многострочного текста

0 голосов
/ 30 мая 2018

У меня есть список предметов.Элемент имеет заголовок и текст.После текста я хочу «отмеченный значок».Этот значок должен быть выровнен по правому краю и по центру текста.

Проблема заключается в том, что значок выровнен по нижней части текста; 

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

1 Ответ

0 голосов
/ 30 мая 2018

Эй, вы можете использовать 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>
...