Question

我试图实现上面的排版。标题居中，但副标题位于标题旁边。我只能用boostrap的小班来实现类似的东西。

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

有什么想法吗？

以下是使用的代码：

＆＃13;

.small{
	text-transform: lowercase !important;
	font-style: italic !important;
	font-family: times, serif !important;
}
.blue{
	color: #35C4F0 !important;
}

＆＃13;

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

＆＃13;

Answer 1

请试试这个。我在css和div下面添加了h1标记。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

将副标题放在中心标题旁边

3 个答案: