如何垂直对齐div中的动画文本？

Question

My goal is to be able to vertically align animated text in a div element.我的目标是能够垂直对齐 div 元素中的动画文本。 I have tried looking for an answer on here, but can't seem to find any.我曾尝试在这里寻找答案，但似乎找不到任何答案。 Specifically, I've tried display:table-cell, vertical-align:middle, and line-height:__, but they all give the same result.具体来说，我尝试了 display:table-cell、vertical-align:middle 和 line-height:__，但它们都给出了相同的结果。

 let elemIds = ['a', 'b', 'c', 'd', 'e'] let currentAnimId = 0 function anims() { let elem = document.getElementById(elemIds[currentAnimId]) let bgimg = document.getElementById('backgroundImg') currentAnimId += 1 bgimg.style.animation="bgblur 5s"; elem.style.display = 'block' elem.style.animation="textAnim 5s"; window.setTimeout(() => { bgimg.style.animation="none"; elem.style.display = 'none' elem.style.animation="none"; elem.style.webkitAnimation = 'none'; window.setTimeout(function() { elem.style.webkitAnimation = ''; if (currentAnimId < elemIds.length) { anims(currentAnimId) } else { console.log("You have reached the end of the text cycle.") } }, 1000); }, 5000) } anims(currentAnimId)

 body { margin: 0px; padding: 0px; font-family: 'Trebuchet MS', sans-serif; } #backgroundImg:empty { display: block; position: relative; } h1 { position: absolute; vertical-align: middle; } #backgroundImg { margin: 0px; padding: 0px; width: 100%; height: 100%; min-height: 100vh; background-image: url("https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxNjk1Mzk5fHxlbnwwfHx8fA%3D%3D&w=1000&q=80"); /* animation: blurry 5s; */ -webkit-filter: blur(0px); background-repeat: no-repeat; background-size: 100% auto; top: 0; left: 0; } #backgroundImg, #textDiv { width: 100%; height: 100%; position: absolute; } #textDiv { left: 100px; height: 80%; width: 80%; color: transparent; -webkit-text-stroke: 1px white; text-shadow: 10px 10px 20px black; z-index: 10; vertical-align: middle; text-align: left; } #a, #b, #c, #d, #e { font-size: 800%; display: none; } @keyframes bgblur { 0% { -webkit-filter: blur(0px); } 25% { -webkit-filter: blur(5px); } 75%

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Test</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="backgroundImg"> </div> <div id="textDiv"> <h1 id="a">a</h1> <h1 id="b">b</h1> <h1 id="c">c</h1> <h1 id="d">d</h1> <h1 id="e">e</h1> </div> <script src="script.js"></script> </body> </html>

If anyone could help that would be great!如果有人可以提供帮助，那就太好了！

PS: I just want it vertically centered, not horizontally. PS：我只希望它垂直居中，而不是水平居中。 Thanks!谢谢！

Answer 1

Add display: flex; align-items: center;添加display: flex; align-items: center; display: flex; align-items: center; to your textDiv .到你的textDiv 。 Your textDiv height is 80% , you should make it 100% if you want to center vertically on all screen你的textDiv高度是80% ，如果你想在所有屏幕上垂直居中，你应该把它设为100%

 let elemIds = ['a', 'b', 'c', 'd', 'e'] let currentAnimId = 0 function anims() { let elem = document.getElementById(elemIds[currentAnimId]) let bgimg = document.getElementById('backgroundImg') currentAnimId += 1 bgimg.style.animation="bgblur 5s"; elem.style.display = 'block' elem.style.animation="textAnim 5s"; window.setTimeout(() => { bgimg.style.animation="none"; elem.style.display = 'none' elem.style.animation="none"; elem.style.webkitAnimation = 'none'; window.setTimeout(function() { elem.style.webkitAnimation = ''; if (currentAnimId < elemIds.length) { anims(currentAnimId) } else { console.log("You have reached the end of the text cycle.") } }, 1000); }, 5000) } anims(currentAnimId)

 body { margin: 0px; padding: 0px; font-family: 'Trebuchet MS', sans-serif; } #backgroundImg:empty { display: block; position: relative; } h1 { position: absolute; vertical-align: middle; } #backgroundImg { margin: 0px; padding: 0px; width: 100%; height: 100%; min-height: 100vh; background-image: url("https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxNjk1Mzk5fHxlbnwwfHx8fA%3D%3D&w=1000&q=80"); /* animation: blurry 5s; */ -webkit-filter: blur(0px); background-repeat: no-repeat; background-size: 100% auto; top: 0; left: 0; } #backgroundImg, #textDiv { width: 100%; height: 100%; position: absolute; } #textDiv { left: 100px; height: 80%; width: 80%; color: transparent; -webkit-text-stroke: 1px white; text-shadow: 10px 10px 20px black; z-index: 10; display: flex; align-items: center; text-align: left; } #a, #b, #c, #d, #e { font-size: 800%; display: none; } @keyframes bgblur { 0% { -webkit-filter: blur(0px); } 25% { -webkit-filter: blur(5px); } 75%

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Test</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="backgroundImg"> </div> <div id="textDiv"> <h1 id="a">a</h1> <h1 id="b">b</h1> <h1 id="c">c</h1> <h1 id="d">d</h1> <h1 id="e">e</h1> </div> <script src="script.js"></script> </body> </html>

如何垂直对齐div中的动画文本？

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-12-15 21:49:10

如何垂直对齐div中的动画文本？

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-12-15 21:49:10

解决方案1
2 已采纳 2021-12-15 21:49:10