CSS文字の中央寄せ

cssを使って三角形を作り、その中央に文字を配置したいです。

css
1
2.triangle{
3  border-top: 86.6025px solid #F0897F;
4  border-right: 50px solid transparent;
5  border-left: 50px solid transparent;
6  color: black;
7  list-style: none;
8  text-align: center;
9  line-height: 60px;
10  opacity: 0.6;
11  position: absolute;
12  top:0px;
13  right:0px;
14  left:0px;
15  bottom:0px;
16  margin:auto;
17  width:0;
18  height:0;
19}
20p{
21  text-align: center;
22}
23

HTML
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3  <head>
4    <link rel="stylesheet" href="style.css">
5    <meta charset="utf-8">
6    <title></title>
7  </head>
8  <body>
9    <div class="triangle">
10      <p>top</p>
11    </div>
12  </body>
13</html>
14

今はこの状態です。
これをchromeで開くと三角形の外に文字が来てしまいます。
回答よろしくお願いします。

BeatStar

2019/03/31 05:11

中央寄せっていうより、CSSで書いた三角形の上に文字"top"を乗せるってことでは?

行動規範の内容に同意します

回答1件

ベストアンサー

テキストを上下左右中央配置するには、<div>で囲う必要があります。

html
1<div class="wrap">
2  <div class="triangle"></div>
3  <div class="text">
4    <p>top</p>
5  </div>
6</div>

css
1/* ここから */
2.wrap {
3  position: relative;
4}
5
6.text {
7  position: absolute;
8  top: 0;
9  right: 0;
10  bottom: 0;
11  left: 0;
12  margin: auto;
13  text-align: center;
14}
15/* ここまで追加 */
16
17.triangle {
18  border-top: 86.6025px solid #F0897F;
19  border-right: 50px solid transparent;
20  border-left: 50px solid transparent;
21  color: black;
22  list-style: none;
23  text-align: center;
24  line-height: 60px;
25  opacity: 0.6;
26  width: 0;
27  height: 0;
28  top: 0;
29  right: 0;
30  bottom: 0;
31  left: 0;
32  margin: auto;
33}