我正在努力实现上面的排版。标题居中,但副标题就在标题旁边。我只能通过 boostrap 的小类教学实现类似的效果。
问题是,字幕正在腾出空间以包含在中心。这可能吗?我知道我可以绝对定位子文本,并将其正确定位,但我有一堆页面,我的客户希望它像那样。
有什么想法吗?
这里是顺便使用的代码:
.small{
text-transform: lowercase !important;
font-style: italic !important;
font-family: times, serif !important;
}
.blue{
color: #35C4F0 !important;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h1 class="text-center text-uppercase"><span class="small blue">software </span>game <br/>development</h1>
最佳答案
你好,兄弟,这可能对你有帮助,谢谢
<div class="head-box">
<h1 class="text-center text-uppercase"><span class="small blue">software </span>game <br/>development</h1>
</div>
这是CSS
.head-box{float: left; width: 100%; position: relative;}
.small{
text-transform: lowercase !important;
font-style: italic !important;
font-family: times, serif !important;
}
.blue{
color: #35C4F0 !important;
position: absolute;
left:25%;
top:30px;
transform: translate(-25%, 0);
}
这是fiddle
关于html - 将副标题放在居中的标题旁边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47009107/