<h1>BoxCenter - InlineBlock_before</h1>
<section class="inline_block_before">
<p>この文章はダミーです。<br>文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</section>
<section class="inline_block_before">
<div>
<h1>タイトル</h1>
<p>この文章はダミーです。<br>文字の大きさ、量、字間、行間等を確認するために入れています。</p>
<a href="">LINK</a>
</div>
</section>
<section class="inline_block_before">
<div>
<img src="https://placehold.jp/3d4070/ffffff/120x70.png?text=dummy">
</div>
</section>
body {
font-family: Roboto, sans-serif;
background: #F0EFEC;
padding: 1em;
-webkit-font-smoothing: antialiased;
}
h1 {
text-align: center;
color: #555;
font-weight: 300;
margin: 0.5em 0 1em 0;
}
.inline_block_before{
display: blcok;
width: 500px;
height: 150px;
background: #929090;
margin: 0 auto 1em;
padding: 1em;
border-radius: .2em;
color: white;
font-size: .875em;
text-align: center;
line-height: 1.6;
}
.inline_block_before > *{
vertical-align: middle;
display: inline-block;
}
.inline_block_before::before{
content: "";
height: 100%;
vertical-align: middle;
width: 0px;
display: inline-block;
}
.inline_block_before h1{
font-size: 1.25em;
margin: 0;
color: #fff;
}
Also see: Tab Triggers