0

Quiero centrar los iconos verticalmente dentro del div padre, pero no soy capaz. Mi código:

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

Hay que tener el cuenta que el contenido del div subtaskTitle es aleatorio y siempre debe quedar centrado.

2 respuestas 2

0

Buenas he modificado algunas cosas, está claro que si el tamaño de la pantalla es muy pequeño no podremos mantener los elementos como dices y tendremos que usar Bootstrap para adaptar-los.

No obstante, tu código quedaria así:

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

0

Puedes usar las propiedades de Flexbox para lograr esta técnica: aquí omití todos los estilos de los hijos, solo le puse este CSS al padre(.subtaskList):

CSS:

.subtaskList{
  display: flex;
  align-items: center;
  background-color: red;
  justify-content: space-around;
  height: 100px;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.