バックグランドカラーを設定して任意の位置に文字を配置したい

初心者です。ご助言お願い致します。
バックグランドカラーを設定したのですが、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}

shinoharat

2021/02/19 00:44

現段階で、・背景色の設定・テキストの中央揃えは出来ているんですよね？まずはそのコードを質問文に掲載していただけませんか？

meg_

2021/02/19 00:51

コードを載せましょう。

Lhankor_Mhy

2021/02/19 05:35

ご提示のコードを試してみましたが、「paddingで設定しようと考えたのですが全く動かず」という問題は発生せず、パディングの変更によって○○の部分が移動しました。つまり、問題が再現しませんでした。おそらく、ご提示いただいていない部分に原因があると思われます。問題が再現するコードをご提示ください。

tomtomtomtom

2021/02/19 09:21

どこにpaddingを設定したいのかだけ教えていただいてよろしいでしょうか？

shinoharat

2021/02/19 09:26

コードの追加ありがとうございます！他の方もおっしゃられていますが、私も同じく、質問者さんの問題が再現しませんでした。つまり、 setumei02 に padding-left: 25%; を足すだけであっさり「中央より右寄り」が実現できました。 reset.css か style.css のどちらかが悪さをしているような気がします。両方のコードを質問文に追加していただけますか？

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

回答1件

<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}