Align vertical center CSS reloj en bootstrap

Frente a un problema en este código de arranque.

  1. sección "hero" ( gradiente de fondo )
  2. contenedor
    • CSS & JS reloj
    • texto
  3. ondas

Quiero que el contenedor esté alineado verticalmente centrado en las resoluciones de la pantalla xl-lg-md-sm-col con igual relleno o margen de la parte superior.

cuando siempre intento ajustar la onda de padding en el fondo también se mueve.

Necesito una salida como esta https://ibb.co/7x3NF2s

aquí está el código-pen https://codepen.io/haribabu-manoharan/pen/xxEdWez

// java scrtipt for clock


const deg = 6;
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');

setInterval(() => {

    let day = new Date();
    let hh = day.getHours() * 30;
    let mm = day.getMinutes() * deg;
    let ss = day.getSeconds() * deg;

    hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
    mn.style.transform = `rotateZ(${mm}deg)`;
    sc.style.transform = `rotateZ(${ss}deg)`;

})



// java scrtipt for clock 
#hero {
    width: 100%;
    position: relative;
    padding: 260px 0 0 0;
    bottom: 0px;
}

/*EDITED NERAM*/
#hero:before {
    content: "";
    /*background: rgba(2, 5, 161, 0.91);*/
    background-image: linear-gradient(111.37738709038058deg, rgba(43, 45, 78, 1) 1.557291666666667%, rgba(225, 20, 139, 1) 101.34895833333333%);
    background-repeat: no-repeat;
    display: inherit;
    align-items: center;
    /*added*/
    position: absolute;
    bottom: 30px;
    top: 0;
    left: 0;
    right: 0;
}

#hero h1 {
    margin: 0 0 20px 0;
    font-size: 24px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
}

#hero h1 span {
    color: #fff;
    border-bottom: 4px solid #1acc8d;
}

#hero h2 {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
    font-size: 17px;
    text-align: justify;
    line-height: 27px;
}

#hero .btn-get-started {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 50px;
    transition: 0.5s;
    color: #fff;
    background: #1acc8d;
}

#hero .btn-get-started:hover {
    background: #17b57d;
}

#hero .animated {
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (min-width: 1024px) {
    #hero {
        background-attachment: fixed;
    }
}

@media (max-width: 991px) {
    #hero {
        padding-top: 260px;
    }

    #hero .animated {
        -webkit-animation: none;
        animation: none;
    }

    #hero .hero-img {
        text-align: center;
    }

    #hero .hero-img img {
        max-width: 45%;
    }

    #hero h1 {
        font-size: 22px;
        line-height: 30px;
        margin-bottom: 10px;
    }

    #hero h2 {
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 30px;
    }
}

@media (max-width: 575px) {
    #hero .hero-img img {
        width: 80%;
    }
}

@-webkit-keyframes up-down {
    0% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(-10px);
    }
}

@keyframes up-down {
    0% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(-10px);
    }
}

.hero-waves {
    display: block;
    margin-top: 70px;
    width: 100%;
    height: 60px;
    z-index: 5;
    position: relative;
    top: -29px;
}


@media (max-width:767px) {
    #hero {
        padding-top: 4px;
    
    }
}

.wave1 use {
    -webkit-animation: move-forever1 10s linear infinite;
    animation: move-forever1 10s linear infinite;
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
}

.wave2 use {
    -webkit-animation: move-forever2 8s linear infinite;
    animation: move-forever2 8s linear infinite;
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
}

.wave3 use {
    -webkit-animation: move-forever3 6s linear infinite;
    animation: move-forever3 6s linear infinite;
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
}

@-webkit-keyframes move-forever1 {
    0% {
        transform: translate(85px, 0%);
    }

    100% {
        transform: translate(-90px, 0%);
    }
}

@keyframes move-forever1 {
    0% {
        transform: translate(85px, 0%);
    }

    100% {
        transform: translate(-90px, 0%);
    }
}

@-webkit-keyframes move-forever2 {
    0% {
        transform: translate(-90px, 0%);
    }

    100% {
        transform: translate(85px, 0%);
    }
}

@keyframes move-forever2 {
    0% {
        transform: translate(-90px, 0%);
    }

    100% {
        transform: translate(85px, 0%);
    }
}

@-webkit-keyframes move-forever3 {
    0% {
        transform: translate(-90px, 0%);
    }

    100% {
        transform: translate(85px, 0%);
    }
}

@keyframes move-forever3 {
    0% {
        transform: translate(-90px, 0%);
    }

    100% {
        transform: translate(85px, 0%);
    }
}

/** clock css **/

.clock {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../img/clock.png);
    background-size: cover;
    border-radius: 50%;
    box-shadow: 0 -25px +25px rgba(255, 255, 255, 0.05),
        inset 0 -25px +25px rgba(255, 255, 255, 0.05),
        0 25px 25px rgba(0, 0, 0, 0.05),
        inset 0 25px 25px rgba(0, 0, 0, 0.05);
}

.clock:before {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: #fff;
    border-radius: 50%;
    z-index: 1000;
}

.clock .hour,
.clock .min,
.clock .sec {
    position: absolute;
}

.clock .hour,
.hr {
    width: 260px;
    height: 150px;
}

.clock .min,
.mn {
    width: 250px;
    height: 190px;
}

.clock .sec,
.sc {
    width: 330px;
    height: 205px;
}

.hr,
.mn,
.sc {
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    position: absolute;
    border-radius: 50%;
}

.hr:before {
    content: '';
    position: absolute;
    width: 12px;
    height: 70px;
    background: #ff105e;
    z-index: 10;
    border-radius: 6px 6px 0 0;
}

.mn:before {
    content: '';
    position: absolute;
    width: 4px;
    height: 100px;
    background: #fff;
    z-index: 11;
    border-radius: 6px 6px 0 0;
}

.sc:before {
    content: '';
    position: absolute;
    width: 2px;
    height: 130px;
    background: #fff;
    z-index: 12;
    border-radius: 6px 6px 0 0;
}

  
     Required meta tags 
    
    

     Bootstrap CSS 
    [email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    Hello, world!
  
  
    

      

           
            


                


                     HTML for clock 

                    

                        

                            

                        

                        

                            

                        

                        

                            

                        

                    


                     End HTML for clock 

                

                
                

                    

                        
Why neram Classes for NATA Coaching ?


                        
We are team of talanted practising architects from IITs & NITs started this for betterment of this Architecture profession 

                        

                            Get Started
                        

                    

                

            

        




        
            
                
            
            
                
            
            
                
            
            
                
            
        

    


     Optional JavaScript; choose one of the two! 

     Option 1: Bootstrap Bundle with Popper

Pregunta hecha hace 3 años, 4 meses, 24 días - Por gitguru

2 Respuestas:

  • Para alinear verticalmente centrado el reloj en tu diseño, necesitas ajustar el CSS del contenedor padre que contiene el reloj. En este caso, el contenedor padre es el <div class="justify-content-sm-center col-12 col-md-6 col-lg-5 offset-xl-1 col-xl-4 order-1 d-flex align-items-center hero-img".

    Puedes agregar la siguiente regla CSS para alinear verticalmente el contenedor del reloj:

    css
.hero-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; / Asegúrate de que el contenedor tenga una altura del 100% /
}

    Esto hará que el contenedor del reloj se centre verticalmente en relación con su contenedor padre.

    Si deseas tener un relleno o margen superior igual en todas las resoluciones de pantalla, puedes ajustar el relleno en la sección <h6>hero y establecer un margen superior igual para los contenedores internos:

    css

    hero {
      padding: 60px 0; / Ajusta el padding superior a tu preferencia /
}

.hero-img {
  margin-top: 20px; / Establece un margen superior igual para mantener la alineación en diferentes resoluciones /
}

    Con estas modificaciones, el contenedor del reloj debería alinearse verticalmente centrado en la pantalla. Puedes ajustar los valores de padding y margin según tus necesidades para lograr el aspecto deseado.

    Respondida el Dec 22, 2020 a las 03:51 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para alinear verticalmente el contenedor en el centro en todas las resoluciones de pantalla, puedes utilizar Flexbox. Aquí tienes los pasos:

    • Añade la clase `d-flex` y `flex-column` al contenedor principal.
    • Añade la clase `align-items-center` al contenedor principal.
    • Añade la clase `justify-content-center` al contenedor principal.

    Esto alineará verticalmente el contenido del contenedor en el centro.

    Aquí tienes un ejemplo actualizado de tu código con estos cambios:

    html

    
  
    
    
    

      
    

        

        
    
          
    
            
    
          
    
          
    
            
    
          
    
          
    
            
    
          
    
        
    

        

      
    

      
    
        
    
          
    Why neram Classes for NATA Coaching ?

    
          
    We are team of talanted practising architects from IITs & NITs started this for betterment of this Architecture profession 
    
          
    
            Get Started

    Esto debería alinear verticalmente el contenedor en el centro para todas las resoluciones de pantalla mientras se mantiene el relleno/margen superior.

    Respondida el Dec 22, 2020 a las 04:01 - por Gemini

    Votos positivos: 0 | Votos negativos: 0