Q&A
現段階で、
・背景色の設定
・テキストの中央揃え
は出来ているんですよね？
まずはそのコードを質問文に掲載していただけませんか？
初心者です。ご助言お願い致します。
バックグランドカラーを設定したのですが、text-alignで設定はできたのですが中央より右寄りした寄せにしたいのですがpaddingで設定しようと考えたのですが全く動かずどうしたらいいものか悩んでおります。
ご助言お願い致します。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="description" content=""> 6<link href="reset.css" rel="stylesheet" type="text/css" madia="screen"> 7<link href="style.css" rel="stylesheet" type="text/css" madia="screen"> 8<link rel="shortcut icon" href="/favicon.ico"> 9<meta name="viewport" content="width=device-width,initial-scale=1.0"> 10 <title></title> 11 </head> 12 <body> 13 <header> 14 <div class="top"></div> 15 <div class="wapper"> 16 <ul class="logo"> 17 <li><a href="./"><img class="mainlogo" src="imges/.png" alt=""></a></li> 18 <li><a href="./"><img class="mainlogo2" src="imges/2.png" alt=""></a></li> 19 </ul> 20 </div> 21 </header> 22 <main> 23 <div class="topnav"> 24 <nav> 25 <ul> 26 <li><a href="./">HOME</a></li> 27 <li><a href="#">*******</a></li> 28 <li><a href="#">*******</a></li> 29 <li><a href="#">*******</a></li> 30 </ul> 31 </nav> 32 </div> 33 <main> 34 <div class="setumei02"><br><br><h1>〇〇〇〇〇</h1></div>
CSS
1.setumei02{ 2 text-align:center; 3 background-color: #afeeee; 4 height: 200px; 5 width: auto; 6 font-size: 48px; 7 padding-right: 20px; 8 margin: 0 auto; 9 max-width: 100%; 10 color: #f08080; 11}
コードを載せましょう。
ご提示のコードを試してみましたが、「paddingで設定しようと考えたのですが全く動かず」という問題は発生せず、パディングの変更によって○○の部分が移動しました。
つまり、問題が再現しませんでした。
おそらく、ご提示いただいていない部分に原因があると思われます。
問題が再現するコードをご提示ください。
どこにpaddingを設定したいのかだけ教えていただいてよろしいでしょうか？
コードの追加ありがとうございます！
他の方もおっしゃられていますが、私も同じく、質問者さんの問題が再現しませんでした。
つまり、 setumei02 に padding-left: 25%; を足すだけであっさり「中央より右寄り」が実現できました。
reset.css か style.css のどちらかが悪さをしているような気がします。
両方のコードを質問文に追加していただけますか？
回答1件
0
<div class="setumei02"><br><br><h1>〇〇〇〇〇</h1></div>
ここの<br>2つは何でしょうか…？
一旦<br>は無いものとすると、.setumei02に対してpadding-leftを設定すれば、左側に内余白ができるので、相対的にh1が右に寄ると思います。
もしくは.setumei02 に対して position: relative;をかけたうえで
css
1.setumei02 h1 { 2 position: absolute; 3 left: 50%; /*左から50%部分に配置*/ 4 top: 50%; 5 transform: translateY(-50%); 6 -webkit-transform: translateY(-50%); 7 -ms-transform: translateY(-50%); 8}
これで、h1が画面の左から50%のところに配置されるようになります。
投稿2021/02/19 05:33
総合スコア272
あなたの回答
tips
プレビュー
