Skip to main content

Alineacion Alineación .ul .li con CSS

estoyEstoy haciendo una timeline en codepen basasdo en otro pen. Lo personalicepersonalicé hasta lo mas minimomás mínimo por el CSS pero no estoy dando con el peque detalle para que los "puntos" de la linealínea me queden alineados con los textoss ytextos.

... Yo estoy aprendiendo CSS y ya lo entiendo bastante, pero sinceramente no ehhe podido alinear estos elemenos, logreelementos; logré hacerlo responsive, animarlo y hacerle unos efectos hover que despues se los quitequité porque no me servian..servían.

Les dejo el ejemplo a ver si me pueden dar una luz..

Necesito poder alinear horizontalmente los h4h4 con los parrafospárrafos, utilizo text-text- e item- alignitem- align pero no pasa nada..

Alineacion .ul .li con CSS

estoy haciendo una timeline en codepen basasdo en otro pen. Lo personalice hasta lo mas minimo por el CSS pero no estoy dando con el peque detalle para que los "puntos" de la linea me queden alineados con los textoss y

... Yo estoy aprendiendo CSS y ya lo entiendo bastante, pero sinceramente no eh podido alinear estos elemenos, logre hacerlo responsive, animarlo y hacerle unos efectos hover que despues se los quite porque no me servian...

Les dejo el ejemplo a ver si me pueden dar una luz..

Necesito poder alinear horizontalmente los h4 con los parrafos, utilizo text- e item- align pero no pasa nada..

Alineación .ul .li con CSS

Estoy haciendo una timeline en codepen basasdo en otro pen. Lo personalicé hasta lo más mínimo por el CSS pero no estoy dando con el peque detalle para que los "puntos" de la línea me queden alineados con los textos.

Yo estoy aprendiendo CSS y ya lo entiendo bastante, pero sinceramente no he podido alinear estos elementos; logré hacerlo responsive, animarlo y hacerle unos efectos hover que despues se los quité porque no me servían.

Les dejo el ejemplo a ver si me pueden dar una luz.

Necesito poder alinear horizontalmente los h4 con los párrafos, utilizo text- e item- align pero no pasa nada.

Origen Enlace

Alineacion .ul .li con CSS

estoy haciendo una timeline en codepen basasdo en otro pen. Lo personalice hasta lo mas minimo por el CSS pero no estoy dando con el peque detalle para que los "puntos" de la linea me queden alineados con los textoss y

... Yo estoy aprendiendo CSS y ya lo entiendo bastante, pero sinceramente no eh podido alinear estos elemenos, logre hacerlo responsive, animarlo y hacerle unos efectos hover que despues se los quite porque no me servian...

Les dejo el ejemplo a ver si me pueden dar una luz..

body {
    background: #000;
}
/*animacion*/
@-webkit-keyframes fadeInUp{
  0%{
    opacity: 0;
    -webkit-transform: translateY(80px);
  }
  100%{
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes fadeInUp{
  0%{
    opacity: 0;
    transform: translateY(80px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}


/* ESTRUCTURA DEL TIMELINE 
Colores Azul: 132D46
        verde: 176E10
Impresion de entrada CSS3
Validacion W3School
*/
h1{
  font-size:60px;
  text-align:center;
}
.timeline{
  position:relative;
  margin:0px auto;
  padding:0px 0;
  width:1000px;
  box-sizing:border-box;
}

/*Linea*/
.timeline:before{
    content: '';
  position:absolute;
  left:50%;
  width:3px;
  height:100%;
  background:#176E10;
}
.timeline ul{
  padding:0;
  margin:0;
}
.timeline ul li{
  list-style:none;
  position:relative;
  width:50%;
  padding:20px 40px;
  box-sizing:border-box;
}
.timeline ul li:nth-child(odd){
  float:left;
  text-align:right;
  clear:both;
    padding-top: 30px;
}
.timeline ul li:nth-child(even){
  float:right;
  text-align:left;
  clear:both;
    
}
.content{
  padding-bottom:20px;
}
.timeline ul li:nth-child(odd):before
{
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  top:24px;
  right:-6px;
  background:#176E10;
  border-radius:50%;
  box-shadow:0 0 0 3px #fff;
}

.timeline ul li:nth-child(even):before
{
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  top:24px;
  left:-4px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 0 3px #176E10;
}
.timeline ul li h3{
  padding:0;
  margin:0;
  color:rgba(233,33,99,1);
  font-weight:600;
}
.timeline ul li p{
  margin:10px 0 0;
  padding:0;
   font-size:20px;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  font-weight:300;
  color: #fff;
  -webkit-animation:fadeInUp 6s;
  animation:fadeInUp 4s;
}
.timeline ul li .time h4{
  margin:0;
    position: relative;
  padding:10;
  font-size:50px;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  -webkit-animation:fadeInUp 4s;
  animation:fadeInUp 7s;
}
.timeline ul li:nth-child(odd) .time
{
  position:absolute;
  top:12px;
  right:-165px;
  margin:0;
  padding:8px 16px;
  background:;
  color:#176E10;
  border-radius:18px;
  box-shadow:0 0 0 0px;
}
.timeline ul li:nth-child(even) .time
{
  position:absolute;
  top:12px;
  left:-165px;
  margin:0;
  padding:8px 16px;
  background:;
  color:#176E10;
  border-radius:18px;
  box-shadow:0 0 0 0px rgba(233,33,99,0.3);
}
@media(max-width:1000px)
{
  .timeline{
    width:100%;
  }
}
@media(max-width:767px){
  .timeline{
    width:100%;
    padding-bottom:0;
  }
  h1{
    font-size:40px;
    text-align:center;
  }
  .timeline:before{
    left:20px;
    height:100%;
  }
  .timeline ul li:nth-child(odd),
  .timeline ul li:nth-child(even)
  {
    width:100%;
    text-align:left;
    padding-left:50px;
    padding-bottom:50px;
  }
  .timeline ul li:nth-child(odd):before,
  .timeline ul li:nth-child(even):before
  {
    top:-18px;
    left:16px;
  }
  .timeline ul li:nth-child(odd) .time,
  .timeline ul li:nth-child(even) .time{
    top:-30px;
    left:50px;
    right:inherit;
  }
}
<body>
  <div class="timeline">
    <ul>
      <li>
        <div class="content">
          <p>Texto descriptivo en el parrafo</p>
        </div>
        <div class="time">
          <h4>1990</h4>
        </div>
      </li>
      
      <li>
        <div class="content">
          <p>Texto descriptivo en el parrafo</p>
        </div>
        <div class="time">
          <h4>1995</h4>
        </div>
      </li>
      
      <li>
        <div class="content">
          <p>Texto descriptivo en el parrafo
 </p>
        </div>
        <div class="time">
          <h4>2000</h4>
        </div>
            </li>
     <li>
        <div class="content">
          <p>Texto descriptivo en el parrafo</p>
        </div>
        <div class="time">
          <h4>2005</h4>
        </div>
      </li>
      
      <li>
        <div class="content">
          <p>Texto descriptivo en el parrafo</p>
        </div>
        <div class="time">
          <h4>2017</h4>
        </div>
      </li>
      
      <li>
        <div class="content">
          <p>Texto descriptivo en el parrafo</p>
        </div>
        <div class="time">
          <h4>2021</h4>
        </div>
      </li>
      
      
      <div style="clear:both;"></div>
    </ul>
  </div>
</body>

Necesito poder alinear horizontalmente los h4 con los parrafos, utilizo text- e item- align pero no pasa nada..