Welcome
自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。
CSSで円を描く 3 テキスト表示
CSSで作成した円の中にテキストを描画していきます。
基本部分のソースコード
Html
図形の本体部分です。
<div class="circle">
<p class="circle-text">円の中央にテキストを配置する。</p>
</div>
CSS
円のデザイン部分です。
.circle{
width: 200px;
height: 200px;
border : 1px solid;
border-radius: 50%;
}
円の中央にテキストを配置する
上記のコードではこのように表示されます。以下、このコードをベースにテキストの配置を整えていきます。
円の中央にテキストを配置する
display:table-cellを使う
display: table-cell;
text-align: center;
vertical-align: middle;
円の中央にテキストを配置する
display: table-cellを使う方法はコードがシンプルでわかりやすいです。ただ、以下の点には注視が必要です。
display:table-cell;を安易に使うべきでない理由いろいろ
positionで絶対配置にする
.circle {
position: relative;
}
.circle-text {
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align:center;
margin:0;
}
円の中央にテキストを配置する
余白を入れる
left: 10%;
right:10%;
円の中央にテキストを配置する。