Q&A
aタグのtextが要素の上いっぱいで、上に少し感覚を開けようとして、top:20pxとしました。
見た目は良かったのですが、aタグのリンクが下がっているのがいやで直したいです。
親要素を超えて要素が移動しない？または要素が下に行かずに文字を中央揃いにするにはどうしたらいいでしょうか？
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <link rel="stylesheet" href="/css/styles.css"> 5 <meta charset="utf-8"> 6 <title>メインページ</title> 7 <h1>掲示板へようこそ</h1> 8 <h2>新規投稿</h2> 9 </head> 10 <body> 11 <section> 12 <!-- 書き込み用フォーム --> 13 <form action="" method="post"> 14 <label for="title">タイトル</label><br> 15 <input type="text" name="title" id="title"><br> 16 <button type="submit">部屋を立てる</button> 17 </form> 18 <h2>投稿一覧</h2> 19 <p>現在の投稿は件です</p> 20 <div class="flexbox"> 21 <div class="posts"> 22 <a href='threads.php?>'> 23 24 </a> 25 </div> 26 <div class="button"> 27 <form action="change.php" method="get"> 28 <button type="submit" name="boards_id">編集</button> 29 </form> 30 <form action="delete.php" method="get"> 31 <button type="submit" name="boards_id">削除</button> 32 </form> 33 </div> 34 </div> 35 </section> 36 </body> 37</html> 38
css
1h1,h2,form{ 2 text-align:center; 3} 4 5body{ 6 margin:0; 7} 8 9a{ 10 color:blue; 11} 12 13button{ 14 display: inline-block; 15 padding: 0.3em 1em; 16 text-decoration: none; 17 color: #67c5ff; 18 border: solid 1px #67c5ff; 19 border-radius: 3px; 20 transition: .4s; 21 outline:none; 22} 23 24.button{ 25 display:block; 26} 27 28.button :hover{ 29 background: #67c5ff; 30 color: white; 31} 32 33.flexbox{ 34 display:flex; 35 position:relative; 36} 37 38.posts{ 39 background-color:#ffeecc; 40 width:100%; 41} 42 43.posts:hover{ 44 background:#ffee; 45} 46 47.posts a{ 48 position:absolute; 49 top: 20px; 50 height:100%; 51 width:100%; 52 text-align: center; 53} 54
回答1件
0
ベストアンサー
Flexboxを使うと簡単です。
.posts aのCSSを下記に変更してください。
css
1.posts a { 2 display: flex; 3 height:100%; 4 justify-content: center; 5 align-items: center; 6}
flex を設定することてブロック要素になるので幅は親要素一杯に広がります。
高さは 100% として親要素の高さに広げます。
justify-content: center; で左右中央寄せ
align-items: center; で上下中央寄せ
です。
投稿2020/03/03 06:53
編集2020/03/03 06:57
総合スコア33699
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/03 08:59