Problems with the positioning of icons

Question

Problems with the positioning of icons

Navigation

#1 by (0 votes)

0

I want to center the icons vertically within the div parent, but I am not capable. My code:

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

You must have the account that the content of div subtaskTitle is random and should always be centered.

css

asked by Korzan 25.07.2017 в 21:09

source

1 answer

Change fill color to a svg in a selector :: after Stacks with fixes in c ++

score 0 · Answer 1

Good I have modified some things, it is clear that if the size of the screen is very small we can not keep the elements as you say and we will have to use Bootstrap to adapt them.

However, your code would look like this:

    .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;
        text-align: center;
    }
    
    #subtaskCheck {
        height: 17px;
        width: 17px;
        border-radius: 3.84px;
        background-color: #FFFFFF;
        margin-left: 20px;
        margin-right: 10px;
    }
    
    .subtaskTitle {
        color: #FFFFFF;
        font-family: Poppins-Regular;
        font-size: 12px;
        display: inline-block;
        width: 60%;
        position: relative;
        top: 10px;
    }
    
    .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>