Проблемы с позиционированием иконки

Я хочу расположить значки по центру отца div, но я не могу. Мой код:

.subtaskList {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 17px;
  padding-top: 17px;
}

#subtaskCheck {
  height: 17px;
  width: 17px;
  border-radius: 3.84px;
  background-color: #FFFFFF;
  margin-left: 20px;
  margin-right: 10px;
}

.subtaskTitle {
  vertical-align: 20%;
  color: #FFFFFF;
  font-family: Poppins-Regular;
  font-size: 12px;
  display: inline-block;
  width: 60%;
}

.alertSubtask {
  height: 23px;
  width: 23px;
  color: #50E3C2;
  font-size: 18px;
  line-height: 23px;
  margin-left: -22px;
  display: none;
  position: absolute;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="subtaskList">
  <i class="si si-bell alertSubtask" style="display: none;"></i>
  <input type="checkbox" id="subtaskCheck" name="subtaskCheck" data- subtaskid="255">
  <div class="subtaskTitle">qwerqwer qwerqwer xcvzxvxczv asdfasdf asdfñlasdf adsfasdfads asdfasdfasdf asdfasdfadsf adsfasdfasd asdfadsf adsfasdfadsf adsfasdfads fadsfdasf asdfasd fdasf asdfasdf asdf asdfa sdfadsf asd asdfasdf as</div>
  <input type="text" class="changeSubtaskName">
  <i class="fa fa-play"><span class="subtaskTime">00:00:00</span></i>
</div>

Необходимо помнить, что содержимое div subtaskTitle является случайным и всегда должен быть в центре.

0
задан 26.07.2017, 00:03
1 ответ

Ты можешь использовать свойства Flexbox, чтобы добиваться этой tГ©cnica: aquГ - omitГ - все стили детей, только я поместил этот CSS отцу (.subtaskList):

CSS:

.subtaskList{
  display: flex;
  align-items: center;
  background-color: red;
  justify-content: space-around;
  height: 100px;
}
0
ответ дан 24.11.2019, 07:14

Теги

Похожие вопросы