よくみかけるこんな感じのタイトルにセンターラインが表示されるデザイン。
CSSで制作するとこんな感じでできましたのでご参考ください。
What’s New
What’s New新着情報
html
What’s New
<div class="center-line"><span>What's New</span></div>.center-line クラスの中で「What’s New」をspanで囲みます。
What’s New新着情報
<div class="center-line"><span>What's New<small>新着情報</small></span></div>さらに下段「新着情報」のような文字を表示させたい場合smallで「新着情報」を囲みます。
CSS
.center-line {
position: relative;
text-align: center;
margin:1em 0;
border:none;
font-weight:normal;
color:#333;
}
.center-line:before {
border-top: 1px solid;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
}
.center-line span {
background-color: #fff;
display: inline-block;
padding: 0 1em;
position: relative;
font-family:"Times New Roman", Times, serif;
font-size:24px;
}
.center-line span small{
color: #999;
font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:11px;
display:block;
}フォントの部分は背景を白にしているだけなので、背景に色が入ってる場合はspanのbackground-colorを変更してください。