text align centerやmargin 0 auto などやってもオブジェクトが真ん中にこない

html

<!doctype html>
<head><link rel="stylesheet" type="text/css" href="s.css">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>
<body>
<header>
    <div class="leftimg"><img src="cola.png"></div>
    <div class="rightobj">
        <ul>
            <li>HOME<BR><i class="fas fa-home"></i></li>
            <li>ABOUT<BR><i class="fas fa-eject"></i></li>
            <li>CONTACT<BR><i class="fas fa-id-card-alt"></i></li>
        </ul>
    </div>
</header>
<main>
    <h1>ACCESS</h1>
    <span>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3236.9022542577827!2d139.86455731487595!3d35.77777733227907!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188568c2f220d1%3A0xfde3dfbb1677d58b!2z44CSMTI1LTAwMzUg5p2x5Lqs6YO96JGb6aO-5Yy65Y2X5rC05YWD77yU5LiB55uu77yS77yV4oiS77yR77yX!5e0!3m2!1sja!2sjp!4v1634123367957!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </span>
</main>
</body>

css

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

header {
  width: 100%;
  background-color: aqua;
  height: 250px;
  display: flex;
}

body {
  background-color: lightcoral;
}

body .leftimg {
  margin-left: 60px;
  margin-top: 30px;
}

body .rightobj {
  margin-top: 20px;
  margin-left: 250px;
}

body ul {
  display: flex;
  font-size: 30px;
}

body ul li {
  list-style: none;
  margin-left: 45px;
}

body .fas {
  margin-top: 10px;
  margin-left: 10px;
}

body h1 {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 30px;
}

body span {
  text-align: center;
  margin: 0 auto;
  margin-left: 100px;
}

body main {
  padding: 30px;
}

body span {
  text-align: center;
  margin: 0 auto;
  margin-left: 100px;
}

ここで、marigin:0 auto;を指定しても、text-align:centerを指定しても真ん中にこなかったのですが、

body span {
  text-align: center;
  margin: 0 auto;
  margin-left: 100px;
}

margin-left:100px;を指定すると左にマージンが開きます。

最初だと、マージンが効かず、２番目だとマージンが聞く理由がよく分かりません。
真ん中に、持ってくるには、どうしたら良いでしょうか。

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

回答2件

ベストアンサー

span タグを　<div> に変えて

body div {
text-align: center;

}
にすれば　中央によりますね。

body main {
padding: 30px;
text-align: center;
}
main に　tex-align:center;をいれても中央によります。

投稿2021/10/16 14:16

niconic73027793

総合スコア215

slaim

2021/10/16 14:47

margin:0 auto;では、できないのは、何故でしょうか？

niconic73027793

2021/10/16 14:50

marginがかかっている要素のspanインライン要素だからです。インライン要素にはwidthを指定できません。

slaim

2021/10/16 14:54

divにして、margin:0 auto; か justify-contetn:center;にしても真ん中に来ませんでした。

niconic73027793

2021/10/16 15:01

div にした場合は、 body div { text-align: center; } ですね。他の方の回答で body span { display: block; text-align: center; } ブロック要素にするやり方でもできると思います。

niconic73027793

2021/10/16 15:04

» text-align:center;とmargin: 0 auto;について | こんぷれ https://konpure.com/2019/02/24/post-10040/ 理論を知るにはこの記事がわかりやすいです。

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

CSS
1body span {
2  display: block;
3  text-align: center;
4}

でどうですか。

投稿2021/10/16 14:03

itagagaki

総合スコア8402

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

text align centerやmargin 0 auto などやってもオブジェクトが真ん中にこない

関連した質問