borderで囲んだ箇所を、画面の中央に寄せたい。
WEBデザインを勉強しています。
cssで、borderを使って文字を囲み、ボタンのように作りました。それを画面の中央に配置したいのですが、うまくできません。
ご教示ください。
0
1Answer
こんな感じだと受け取りましたが合っているでしょうか。
hello.html
<!DOCTYPE html>
<body>
<p style="border:solid; display:inline-block; position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);">こんにちは</p>
</body>
</html>
画面の中央を原点にとって自分に対して半分ずつ戻る感じだと思います。
参考リンク
NAGAYA「CSSで要素を上下や左右から中央寄せする7つの方法」
https://www.granfairs.com/blog/staff/centering-by-css
(2017年3月9日)
yukinaka「transformプロパティを使って要素を上下中央に配置する」
https://qiita.com/yukinaka/items/1da62535553b62cc50aa
(2017年4月25日)
0Like
Comments
@ishida-kun
Questioner
ありがとうございます！できました！天才です！