0
191
VistasAlineación de elemento en HTML/CSS
Tengo el siguiente código:
scroll { left: 50%; transform: translateY(0%) rotate(45deg); opacity: 0; } @keyframes scrolldown1 { 0% { transform: translateY(20%) rotate(45deg); opacity: 0.7; } 50% { transform: translateY(0%) rotate(45deg); opacity: 0.2; } 100% { transform: translateY(20%) rotate(45deg); opacity: 0.7; } } <scroll style="width: 2em; height: 2em; background-color: transparent; z-index: 80; bottom: 25px; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; position: absolute; animation: scrolldown1 1.2s ease-in-out infinite 0.15s;"></scroll> <scroll style="width: 2em; height: 2em; background-color: transparent; z-index: 80; bottom: 40px; position: absolute; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; animation: scrolldown1 1.2s ease-in-out infinite;"></scroll>Esto es básicamente un botón de desplazamiento y, por mi parte, el resultado se ve así:
Como puede ver, la alineación del botón de desplazamiento está ligeramente desviada y me gustaría que estuviera justo encima del texto de MY STORY o centrado. ¿Cómo lograría esta tarea?
El código del texto MY STORY es el siguiente:
section { padding: 60px 0; overflow: hidden; } .section-title { text-align: center; padding-bottom: 30px; } .section-title h2 { font-size: 32px; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 20px; position: relative; color: #45505b; } .section-title h2::before { content: ''; position: absolute; display: block; width: 120px; height: 1px; background: #ddd; bottom: 1px; left: calc(50% - 60px); } .section-title h2::after { content: ''; position: absolute; display: block; width: 40px; height: 3px; background: #0563bb; bottom: 0; left: calc(50% - 20px); } <div class="section-title"> <h2>My Story</h2> </div>¿Cómo lograría esta tarea?
Básicamente, el botón de desplazamiento debe estar justo encima del texto.
1 Respuestas
Responde la pregunta0
Tenga en cuenta que los pseudoelementos de su .section-title tienen su propiedad left establecida usando calc y teniendo en cuenta la mitad del width de cada elemento:
.section-title h2::before { ... width: 120px; ... left: calc(50% - 60px); } .section-title h2::after { ... width: 40px; ... left: calc(50% - 20px); } Pero la propiedad de la left en su declaración de scroll no usa calc . Por lo tanto, una posible solución sería usarlo. Dado que cada elemento de scroll tiene un ancho de 2em , la mitad sería de 1em . Asi que:
scroll { /* left: 50%; */ /* remove this line */ left: calc(50% - 1em); /* add this line */ transform: translateY(0%) rotate(45deg); opacity: 0; }Vea la demostración a continuación.
#container { position: relative; height: 5em; } scroll { /* left: 50%; */ /* remove this line */ left: calc(50% - 1em); /* add this line */ transform: translateY(0%) rotate(45deg); opacity: 0; } .first-scroll { width: 2em; height: 2em; background-color: transparent; z-index: 80; bottom: 25px; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; position: absolute; animation: scrolldown1 1.2s ease-in-out infinite 0.15s; } .second-scroll { width: 2em; height: 2em; background-color: transparent; z-index: 80; bottom: 40px; position: absolute; border-width: 0 0.25em 0.25em 0; border-style: solid; border-color: black; animation: scrolldown1 1.2s ease-in-out infinite; } @keyframes scrolldown1 { 0% { transform: translateY(20%) rotate(45deg); opacity: 0.7; } 50% { transform: translateY(0%) rotate(45deg); opacity: 0.2; } 100% { transform: translateY(20%) rotate(45deg); opacity: 0.7; } } section { padding: 60px 0; overflow: hidden; } .section-title { text-align: center; padding-bottom: 30px; } .section-title h2 { font-size: 32px; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 20px; position: relative; color: #45505b; } .section-title h2::before { content: ''; position: absolute; display: block; width: 120px; height: 1px; background: #ddd; bottom: 1px; left: calc(50% - 60px); } .section-title h2::after { content: ''; position: absolute; display: block; width: 40px; height: 3px; background: #0563bb; bottom: 0; left: calc(50% - 20px); } <div id="container"> <scroll class="first-scroll"></scroll> <scroll class="second-scroll"></scroll> </div> <div class="section-title"> <h2>My Story</h2> </div>PD.: A menos que esté utilizando este diseño posicionado por razones de compatibilidad con el navegador, probablemente debería considerar usar módulos de diseño más modernos, como flexbox o grid, su vida sería mucho más fácil.