[英]text-align: center not working on dynamic inline-block <h1> tag
我有一个angular指令,它可以滚动浏览数组中的单词,并以某种方式显示它们,使其看起来好像有人在键入(例如: 在此处输入链接描述 )。 我在获取h1
标记时遇到问题,该标记包含动态更改的字体为text-align: center
。 只是不起作用。
这是我的HTML ...
<div class='intro-div'>
<h1 class='intro-title'>Hi, I'm Erik. I build & design</h1>
<div class='changing-text-space-holder'>
<h1 i-do class='intro-title changing-text'></h1>
</div>
<button class='hire-me-btn'>AVAILABLE FOR HIRE</button>
</div>
这是我的CSS ...
.intro-div{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 55em;
}
.intro-title{
font-family: 'WSReg';
color: white;
font-size: 3.5em;
text-align: center;
}
.changing-text-space-holder{
height: 3em;
width: 100%;
}
.changing-text{
border-right: lightgrey solid;
display: inline-block;
text-align: center;
}
.hire-me-btn{
border: solid white .2em;
border-radius: 75px;
width: 80%;
height: 2.5em;
background-color: transparent;
font-size: 3em;
font-family: 'WSReg';
color: white;
position: relative;
left: 50%;
transform: translateX(-50%);
}
这是我的指令
myModule.directive('iDo', function(){
return function(scope){
var element = angular.element('.changing-text');
var words = ['front-end.', 'back-end.', 'anywhere between the "ends".', 'e-commerce websites.', 'landing-pages.', 'with Javascript.', 'with Python.', 'the internet.']
var startStopBool = false;
var word_count = 0;
var letter_count = 0;
function updateText(){
if(words[word_count] === undefined){ //if no more words in array stop
clearInterval(frontDisplay);
}else if(element[0].innerHTML.length === words[word_count].length){ //switch to next word
word_count++;
letter_count = 0;
clearInterval(frontDisplay);
setTimeout(function(){restartInterval()}, 2000); //wait 1 second and then restart the text
}else{
element[0].innerHTML += words[word_count][letter_count]
letter_count++;
}
}
function restartInterval(){
element[0].innerHTML = '';
frontDisplay = setInterval(updateText, 200);
}
var frontDisplay = setInterval(updateText, 200) //Starts text cycle
}
})
使您的.changing-text类成为display:block。
内联元素自然可以在其左侧和右侧具有其他元素,而block则不能。 这样的回答有一个很好的解释。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.