【CSS】作図 - 円形の中にテキストを入れる【DEMO】 - N-PLUS.work

ホーム » N-PLUS 全記事一覧 » DEMO » 【CSS】作図 – 円形の中にテキストを入れる【DEMO】

【CSS】作図 – 円形の中にテキストを入れる【DEMO】

CSS／DEMO

■HTML CODE

<div>
<p>text</p>
</div>

■CSS CODE

div {
width: 90px;
height: 90px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
font-size: 1em;
font-weight:bold;
color: #fff;
background:#615043;
text-align: center;
margin:0 auto;
}
div > p {
position: relative;
top:50%;
transform: translateY(-50%);
}