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

Question

我正在努力实现上面的版式。标题居中，但副标题就在标题旁边。我只能通过 boostrap 的小 class.

实现类似的效果

问题是，字幕使 space 包含在中间。这可能吗？我知道我可以绝对定位 sub-text，并正确定位它，但我有一堆我的客户希望它像那样的页面。

有什么想法吗？

这里是顺便使用的代码：

.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

请试试这个。我在下面添加了 css 和 div 来包装 h1 标签。

.title h1 {
  display: inline-block;
  text-align: left;
}

.small{
  text-transform: lowercase !important;
  font-style: italic !important;
  font-family: times, serif !important;
}
.blue{
  color: #35C4F0 !important;
}
.title h1 {
  display: inline-block;
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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"/>
<div class="text-center title">
  <h1 class="text-uppercase"><span class="small blue">software </span>game <br/>development</h1>
</div>

Answer 2

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

<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

Answer 3

.blue{
  color: #35C4F0;
  text-transform: lowercase;
  font-style: italic;
  letter-spacing: 3.5px;
}

h1{
  text-transform: uppercase;
  text-align: center;
}

<h1 class=""><span class="small blue">software </span>game<br/>development</h1>

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

place subtitle beside centered heading title

html

css

typography