html - 将副标题放在居中的标题旁边

Question

https://imgur.com/Wv3nWms

我正在努力实现上面的排版。标题居中，但副标题就在标题旁边。我只能通过 boostrap 的小类教学实现类似的效果。

https://imgur.com/5BXCFNj

问题是，字幕正在腾出空间以包含在中心。这可能吗？我知道我可以绝对定位子文本，并将其正确定位，但我有一堆页面，我的客户希望它像那样。

有什么想法吗？

这里是顺便使用的代码:

.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>

Answer 1

你好，兄弟，这可能对你有帮助，谢谢

<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