我有一个简短的问题要问你,我知道它应该很简单...这里我有两个标题 (h1)。它们每个都包含 1 个单词,并且都必须彼此相邻放置,就像一个普通的短语一样,问题是我无法将它们居中。它们都应该与文档顶部和中心的标题完全一样。我同时使用它们是因为我想稍后将它们与 GSAP 或其他东西“补间”。
.title{
display: inline;
position: top center;
}
#tr{
position: left top;
margin-top: 0.02%;
color: lightgray;
size:18px;
}
#si{
position: right top;
margin-top: 0.02%;
color: lightgray;
size:18px;
}
//that's on .css side
//html
<h1 id='tr' class="title"> Winter </h1><h1 id='si' class="title">Day</h1>
这个位置:顶部居中;行不会以预期的方式影响文本。为了向您展示它现在看起来像这样:
| Winter day | | |
*我刚刚放置的那些标记'|'不包含在元素中,它只是为了让您了解正在发生的事情。
最佳答案
最好的方法是将它们都放在一个 div 中,将它们显示为 inline-block
并为 div 赋予 text-align: center
HTML
<div class='centered-images'>
<h1 class='title'>Winter</h1>
<h1 class='title'>Day</h1>
</div>
CSS
.centered-images {
text-align: center;
}
.title {
display: inline-block;
size: 18px;
color: lightgray;
}
这是一个 jsfiddle进行演示。
关于html - 将两个词彼此相邻放置 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32446683/