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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

5回答

2148閲覧

html css 要素を中央寄せにしたいがmarginが効かない

globalplus

総合スコア119

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/11/06 06:49

編集2018/11/06 08:49

section class="gridWrapper"に属するbox達を中央に揃えたいのですがmarginもdisplay:inlineも効かなくて困っています
教えていただけたら嬉しいです。よろしくお願いします。

html

1<div class="wrapper"> 2 <section id="main"> 3 4 <section class="gridWrapper"> 5 <article class="grid"> 6 <div class="box"> 7 <h3><a href="surgery.html">外科</a></h3> 8 </div> 9 </article> 10 11 <article class="grid"> 12 <div class="box"> 13 <h3><a href="internal.html">内科</a></h3> 14 </div> 15 </article> 16 17 <article class="grid"> 18 <div class="box"> 19 <h3><a href="digestive.html">消化器外科</a></h3> 20 </div> 21 </article> 22 23 <article class="grid"> 24 <div class="box"> 25 <h3><a href="orthopedics.html">整形外科・リハビリテーション科</a></h3> 26 </div> 27 </article> 28 29 <article class="grid"> 30 <div class="box"> 31 <h3><a href="plasticsurgery.html">形成外科</a></h3> 32 </div> 33 </article> 34 35 <article class="grid"> 36 <div class="box"> 37 <h3><a href="urology.html">泌尿器科</a></h3> 38 </div> 39 </article> 40 41 <article class="grid"> 42 <div class="box"> 43 <h3><a href="dermatology.html">皮膚科</a></h3> 44 </div> 45 </article> 46 47 <article class="grid"> 48 <div class="box"> 49 <h3><a href="neurology.html">神経内科</a></h3> 50 </div> 51 </article> 52 53 <article class="grid"> 54 <div class="box"> 55 <h3><a href="pediatrics.html">小児科</a></h3> 56 </div> 57 </article> 58 59 <article class="grid"> 60 <div class="box"> 61 <h3><a href="neurosurgery.html">脳神経外科</a></h3> 62 </div> 63 </article> 64 65 <article class="grid"> 66 <div class="box"> 67 <h3><a href="dentistry.html">歯科</a></h3> 68 </div> 69 </article> 70 71 <article class="grid"> 72 <div class="box"> 73 <h3><a href="otolaryngology.html">耳鼻咽喉科</a></h3> 74 </div> 75 </article> 76 77 <article class="grid"> 78 <div class="box"> 79 <h3><a href="outpatient.html">専門外来</a></h3> 80 </div> 81 </article> 82 83 <article class="grid"> 84 <div class="box"> 85 <h3><a href="infectious.html">感染症外来</a></h3> 86 </div> 87 </article> 88 89 <article class="grid"> 90 <div class="box"> 91 <h3><a href="medicalcheckup.html">健康診断・人間ドック</a></h3> 92 </div> 93 </article> 94 </section> 95 </section> 96 </class> 97</div>

css

1#header,#wrapper,.inner{ 2 width:960px; 3 padding:0; 4 margin:0 auto; 5} 6 7 #wrapper{ 8 padding-bottom:20px; 9 margin-left: auto; 10 margin-right: auto; 11} 12 13.gridWrapper{ 14 padding-bottom:40px; 15 overflow: hidden; 16 margin: auto; 17 display: inline-block; 18} 19 20.grid{ 21 float:left; 22 border-radius:5px; 23 background:#fff; 24} 25 26.box{ 27 width: 230px; 28 height: 60px; 29 margin:0 5px; 30 padding:10px; 31 border:1px solid #f1f1f1; 32 padding: 0.5em 1em; 33 margin: 1em 0; 34 background: #f4f4f4; 35 border-left: solid 6px #acd16b; 36 box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); 37}

イメージ説明
画像のように左の空白が多すぎるので15個のbox達をそのまま中央寄せしたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/11/06 07:20

提示されたコードのみではむしろ左に寄っているので、もっと外側から書いてくれないと再現できません。
globalplus

2018/11/06 07:23

どこを直せば良いでしょうか?
x_x

2018/11/06 07:25

再現可能なコードを提示してください。提示コードのみを書いてブラウザで開けばわかるのでは?
globalplus

2018/11/06 07:59

ご指摘があった通り記述を追加していたところ、親要素のmainがcss内に記述されてない事に気付きました。そこでmainにwidthとmarginを記述してみましたが動きません。
x_x

2018/11/06 08:07

<class ="wrapper">と書かれていますが、誤記かと思うので見直してみてください
globalplus

2018/11/06 08:31

class id="wrapper"とご指摘がありました。それを直しても未だ中央に寄っていません、、
x_x

2018/11/06 08:33

ええと、問題の再現をしたいだけなので、中央によるわけではありませんよ?
x_x

2018/11/06 08:35

とにかく、<class ...>というのは誤りのはずなので(class要素はない)、もう一度見直してみてください
globalplus

2018/11/06 08:36

すみません初心者なもので、(class要素はない)という表現が理解できないのですが、もう少し教えていただけませんか?
x_x

2018/11/06 08:39

<class ...>と本当に書いていたとしたら間違いだということですが、いずれにせよ、左が空くという現象は見られません。もっと外側から記述する必要があるのでは?
x_x

2018/11/06 09:04

なぜか修正しようとしている?みたいですが、問題の再現のために実際のコードをそのまま提示してくれたらいいので(公開してはいけないところは○などにして)、再現するコードをお願いします。
guest

回答5

0

ベストアンサー

CSS

1#main { 2 margin: 0 auto; 3 width: 667px; 4 padding-right: 15px; 5}

CSS

1.gridWrapper { 2 width: 960px; 3 margin-left: auto; 4 margin-right: auto; 5}

子のほうが広くなっています。
どちらかが間違いでは?

これを直すと当初の通り左に寄るので、そこからFlexなりグリッドレイアウトなりで中央に寄せてください

投稿2018/11/06 09:44

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

globalplus

2018/11/06 10:49

mainのwidthを変更したら中央に寄りました。この度は本当にありがとうございます。助かりました。
guest

0

margin:auto;は、自身の幅が設定されていないと効きません。

これでいかがでしょうか?
width:calc(269px * 3);は、ひとつのBOXの大きさ×3 です。)

css

1.gridWrapper{ 2 padding-bottom:40px; 3 overflow: hidden; 4 display: block; 5 margin:0 auto; 6 width:calc(269px * 3); 7}

---追記 ---
元のを色々いじってしまっているようなので、、、。
.gridWrapperを一部変更するだけです。

html

1<style> 2.gridWrapper{ 3 padding-bottom:40px; 4 overflow: hidden; 5 padding-bottom:40px; 6 /*display: inline-block;*/ 7 display: block; 8 /*margin: auto;*/ 9 margin:0 auto; 10 width:calc(269px * 3); 11} 12 13.grid{ 14 float:left; 15 border-radius:5px; 16 background:#fff; 17} 18 19.box{ 20 width: 230px; 21 height: 60px; 22 margin:0 5px; 23 padding:10px; 24 border:1px solid #f1f1f1; 25 padding: 0.5em 1em; 26 margin: 1em 0; 27 background: #f4f4f4; 28 border-left: solid 6px #acd16b; 29 box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); 30} 31 32</style> 33<section class="gridWrapper"> 34 <article class="grid"> 35 <div class="box"> 36 <h3><a href="surgery.html">外科</a></h3> 37 </div> 38 </article> 39 40 <article class="grid"> 41 <div class="box"> 42 <h3><a href="internal.html">内科</a></h3> 43 </div> 44 </article> 45 46 <article class="grid"> 47 <div class="box"> 48 <h3><a href="digestive.html">消化器外科</a></h3> 49 </div> 50 </article> 51 52 <article class="grid"> 53 <div class="box"> 54 <h3><a href="orthopedics.html">整形外科・リハビリテーション科</a></h3> 55 </div> 56 </article> 57 58 <article class="grid"> 59 <div class="box"> 60 <h3><a href="plasticsurgery.html">形成外科</a></h3> 61 </div> 62 </article> 63 64 <article class="grid"> 65 <div class="box"> 66 <h3><a href="urology.html">泌尿器科</a></h3> 67 </div> 68 </article> 69 70 <article class="grid"> 71 <div class="box"> 72 <h3><a href="dermatology.html">皮膚科</a></h3> 73 </div> 74 </article> 75 76 <article class="grid"> 77 <div class="box"> 78 <h3><a href="neurology.html">神経内科</a></h3> 79 </div> 80 </article> 81 82 <article class="grid"> 83 <div class="box"> 84 <h3><a href="pediatrics.html">小児科</a></h3> 85 </div> 86 </article> 87 88 <article class="grid"> 89 <div class="box"> 90 <h3><a href="neurosurgery.html">脳神経外科</a></h3> 91 </div> 92 </article> 93 94 <article class="grid"> 95 <div class="box"> 96 <h3><a href="dentistry.html">歯科</a></h3> 97 </div> 98 </article> 99 100 <article class="grid"> 101 <div class="box"> 102 <h3><a href="otolaryngology.html">耳鼻咽喉科</a></h3> 103 </div> 104 </article> 105 106 <article class="grid"> 107 <div class="box"> 108 <h3><a href="outpatient.html">専門外来</a></h3> 109 </div> 110 </article> 111 112 <article class="grid"> 113 <div class="box"> 114 <h3><a href="infectious.html">感染症外来</a></h3> 115 </div> 116 </article> 117 118 <article class="grid"> 119 <div class="box"> 120 <h3><a href="medicalcheckup.html">健康診断・人間ドック</a></h3> 121 </div> 122 </article> 123</section>

--- 追記 ---

html

1<style> 2#header,#wrapper,.inner{ 3 width:960px; 4 padding:0; 5 margin:0 auto; 6} 7 8#wrapper{ 9 padding-bottom:20px; 10 margin-left: auto; 11 margin-right: auto; 12} 13.gridWrapper{ 14 padding-bottom:40px; 15 overflow: hidden; 16 padding-bottom:40px; 17 /*display: inline-block;*/ 18 display: block; 19 /*margin: auto;*/ 20 margin:0 auto; 21 width:calc(269px * 3); 22} 23 24.grid{ 25 float:left; 26 border-radius:5px; 27 background:#fff; 28} 29 30.box{ 31 width: 230px; 32 height: 60px; 33 margin:0 5px; 34 padding:10px; 35 border:1px solid #f1f1f1; 36 padding: 0.5em 1em; 37 margin: 1em 0; 38 background: #f4f4f4; 39 border-left: solid 6px #acd16b; 40 box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); 41} 42 43</style> 44<class ="wrapper"> 45 <section id="main"> 46 <section class="gridWrapper"> 47 <article class="grid"> 48 <div class="box"> 49 <h3><a href="surgery.html">外科</a></h3> 50 </div> 51 </article> 52 53 <article class="grid"> 54 <div class="box"> 55 <h3><a href="internal.html">内科</a></h3> 56 </div> 57 </article> 58 59 <article class="grid"> 60 <div class="box"> 61 <h3><a href="digestive.html">消化器外科</a></h3> 62 </div> 63 </article> 64 65 <article class="grid"> 66 <div class="box"> 67 <h3><a href="orthopedics.html">整形外科・リハビリテーション科</a></h3> 68 </div> 69 </article> 70 71 <article class="grid"> 72 <div class="box"> 73 <h3><a href="plasticsurgery.html">形成外科</a></h3> 74 </div> 75 </article> 76 77 <article class="grid"> 78 <div class="box"> 79 <h3><a href="urology.html">泌尿器科</a></h3> 80 </div> 81 </article> 82 83 <article class="grid"> 84 <div class="box"> 85 <h3><a href="dermatology.html">皮膚科</a></h3> 86 </div> 87 </article> 88 89 <article class="grid"> 90 <div class="box"> 91 <h3><a href="neurology.html">神経内科</a></h3> 92 </div> 93 </article> 94 95 <article class="grid"> 96 <div class="box"> 97 <h3><a href="pediatrics.html">小児科</a></h3> 98 </div> 99 </article> 100 101 <article class="grid"> 102 <div class="box"> 103 <h3><a href="neurosurgery.html">脳神経外科</a></h3> 104 </div> 105 </article> 106 107 <article class="grid"> 108 <div class="box"> 109 <h3><a href="dentistry.html">歯科</a></h3> 110 </div> 111 </article> 112 113 <article class="grid"> 114 <div class="box"> 115 <h3><a href="otolaryngology.html">耳鼻咽喉科</a></h3> 116 </div> 117 </article> 118 119 <article class="grid"> 120 <div class="box"> 121 <h3><a href="outpatient.html">専門外来</a></h3> 122 </div> 123 </article> 124 125 <article class="grid"> 126 <div class="box"> 127 <h3><a href="infectious.html">感染症外来</a></h3> 128 </div> 129 </article> 130 131 <article class="grid"> 132 <div class="box"> 133 <h3><a href="medicalcheckup.html">健康診断・人間ドック</a></h3> 134 </div> 135 </article> 136 </section> 137 138 </class> 139</div>

投稿2018/11/06 07:43

編集2018/11/06 08:14
colling

総合スコア798

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

globalplus

2018/11/06 07:57

ご回答ありがとうございます。アドバイスの通り書いてみたのですが動かない(寄らない)ませんでした。他に良い策はないでしょうか?
colling

2018/11/06 08:01

追記しました
globalplus

2018/11/06 08:08

再度ご回答ありがとうございます。その通りに記述してみましたが動きませんでした。 親要素に <class ="wrapper">と<section id="main">があるのですがこれが関係しているという事はないでしょうか?
colling

2018/11/06 08:14

さらに追記しましたが、こちらでは<class ="wrapper">と<section id="main">があっても中央に寄っています。
colling

2018/11/06 08:16

<class="wrapper">は変ですけども(笑
colling

2018/11/06 08:17

<class id="wrapper">の間違いですね、、。多分
globalplus

2018/11/06 08:23

全て試しましたが、やはりうんともすんともしません(動きません)。どうしたら良いでしょうか?
globalplus

2018/11/06 08:26

ただ検証画面にするとboxの間に空間ができて中央に来ています。
colling

2018/11/06 08:53

検証画面とはデベロッパーツールのことでしょうか? とりあえず、別のHTMLを作って、回答のソースを貼りつけて、アクセスしても同じでしょうか?
globalplus

2018/11/06 08:59

上記のコードのみを別のhtmlとcssファイルで作って見ると中央に表示されています。。。 しかし作成中のサイトですと中央じゃないんです。。。
colling

2018/11/06 09:05

他に質問に記載されていないソースがあるのでしょうか? あと、cssの読み込み位置はどうですか?
colling

2018/11/06 09:19

現行ソースの、最後の方 </section> </class> </div> の</class>は不要ですね。開始タグがありません。
globalplus

2018/11/06 10:51

x_xさんの助言によりmainのwidthを変更したら中央に寄りました。たくさんのご回答頂きありがとうございます。
colling

2018/11/06 11:12

最初からcssをすべて開示してたら、早期解決でしたね(^_^)
globalplus

2018/11/07 04:53

いつもはswiftのエラーを聞くのにこのサイトを使っていて、この間不必要なコードは削除しろと怒られたので短縮したコードを載せてしまいました。すみません。
guest

0

css

1.gridWrapper{ 2 padding-bottom:40px; 3 overflow: hidden; 4 margin: auto; 5 display: flex; 6 justify-content: center; 7 flex-flow: row wrap; 8} 9 10.grid{ 11 border-radius:5px; 12 background:#fff; 13} 14 15.box{ 16 width: 230px; 17 height: 60px; 18 margin:0 5px; 19 padding:10px; 20 border:1px solid #f1f1f1; 21 padding: 0.5em 1em; 22 margin: 1em 0; 23 background: #f4f4f4; 24 border-left: solid 6px #acd16b; 25 box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); 26} 27

floatがあったので提案ですけど、このようにFlexboxでやるのはいかがでしょう?

投稿2018/11/06 07:32

oh_rusty_nail

総合スコア319

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

globalplus

2018/11/06 08:01

回答ありがとうございます。アドバイスの通りにやってみたところ、さらに右に寄ってしまい、box間の隙間が空いてしまいしました。
globalplus

2018/11/06 10:53

x_xさんの助言によりmainのwidthを変更したら中央に寄りました。たくさんのご回答頂きありがとうございます。
guest

0

gridWrapper の上にもうひとつ親要素を作ります。

例えば

■HTML■
<div class="oyayouso">

<section class="gridWrapper"> <article class="grid"> <div class="box"> <h3><a href="surgery.html">外科</a></h3> </div> </article> ・ ・ ・ </div>

■CSS■

.oyayouso {
width: 1000px;
margin: 0 auto;
}

こちらでサイト自体が中央寄せになりませんでしょうか?

widthやクラス名等は変更してください♪

投稿2018/11/06 07:31

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

globalplus

2018/11/06 07:54

わかりやすい回答ありがとうございます。 gridWrapperの上にmainという親要素があるのですがそれにwidthとmarginを入れても動きません泣
退会済みユーザー

退会済みユーザー

2018/11/06 08:11

ん??HTMLですが <class ="wrapper"> になっていますが 現物は<div class="wrapper">であっていますか?
globalplus

2018/11/06 08:16

あっています。gridWrapperの上にmainがあり、その上にwrapperがあります。
退会済みユーザー

退会済みユーザー

2018/11/06 08:18

あ、違います。ソースの書き方です。 div がぬけてます。
globalplus

2018/11/06 08:24

すみません、そういう事ですね。そうすると<div class="wrapper">の上の<div> は必要ですか?
退会済みユーザー

退会済みユーザー

2018/11/06 08:35

いらないです。あとCSSも#wrapper はいらないです。 classなので ○CSS○ .wrapper{ width:80%; margin:0 auto; text-align:center; } HTML <body> <div class="wrapper"> <section id="main"> ・ ・ ・ こちらで確認しましたが上記タグできちんと中央寄せになりましたよ(^.^)
globalplus

2018/11/06 08:41

ご丁寧な回答本当にありがとうございます。上記の通りに書いてみましたが中央にいかず、動かないままです...泣
退会済みユーザー

退会済みユーザー

2018/11/06 08:46

多分タグの小さなミスだと思います(><) またよければこちらにそのままのHTMLとCSSの記載をお願いします。 上記のglobalplus様のHTMLタグはスペルミス等があるので・・。 まず 誤)<class id ="wrapper">  → 正)<div class="wrapper"> こちらで試してみてください。
globalplus

2018/11/06 08:52

お言葉に甘えてそのままを記載させて頂きます。<div class="wrapper">は直しました。 html <div class="wrapper"> <section id="main"> <div id="mainBanner"> <img src="img_landscape.jpg" width="660" height="140" alt=""> <div class="slogan"> <h2></h2> <p></p> </div> </div> <section class="gridWrapper"> <article class="grid"> <div class="box"> <h3><a href="surgery.html">外科</a></h3> </div> </article> <article class="grid"> <div class="box"> <h3><a href="internal.html">内科</a></h3> </div> </article> <article class="grid"> <div class="box"> <h3><a href="digestive.html">消化器外科</a></h3> </div> </article> <article class="grid"> <div class="box"> <h3><a href="orthopedics.html">整形外科・リハビリテーション科</a></h3> </div> </article> <article class="grid"> <div class="box"> <h3><a href="plasticsurgery.html">形成外科</a></h3> </div> </article> <article class="grid"> <div class="box"> <h3><a href="urology.html">泌尿器科</a></h3> </div> </article> <article class="grid"> <div class="box"> <h3><a href="dermatology.html">皮膚科</a></h3> </div> </article> <article class="grid"> <div class="box"> <h3><a href="neurology.html">神経内科</a></h3> </div> </article> <article class="grid"> <div class="box"> <h3><a href="pediatrics.html">小児科</a></h3> </div> </article> <article class="grid"> <div class="box"> <h3><a href="neurosurgery.html">脳神経外科</a></h3> </div> </article> <article class="grid"> <div class="box"> <h3><a href="dentistry.html">歯科</a></h3> </div> </article> <article class="grid"> <div class="box"> <h3><a href="otolaryngology.html">耳鼻咽喉科</a></h3> </div> </article> <article class="grid"> <div class="box"> <h3><a href="outpatient.html">専門外来</a></h3> </div> </article> <article class="grid"> <div class="box"> <h3><a href="infectious.html">感染症外来</a></h3> </div> </article> <article class="grid"> <div class="box"> <h3><a href="medicalcheckup.html">健康診断・人間ドック</a></h3> </div> </article> </section> </section> </div> css /* 全体 ------------------------------------------------------------*/ .wrapper{ width:80%; margin:0 auto; text-align:center; } /************************** /* グリッド **************************/ .gridWrapper{ padding-bottom:40px; overflow: hidden; padding-bottom:40px; /*display: inline-block;*/ display: block; /*margin: auto;*/ margin:0 auto; width:calc(269px * 3); } main{ width: 1000px; margin: 0 auto; } * html .gridWrapper{ height:1%; } .grid{ float:left; border-radius:5px; background:#fff; } .box{ width: 230px; height: 60px; margin:0 5px; padding:10px; border:1px solid #f1f1f1; padding: 0.5em 1em; margin: 1em 0; background: #f4f4f4; border-left: solid 6px #acd16b; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); } .box h3 { color: #333; } a { color: inherit; } /* PC用 ------------------------------------------------------------*/ @media only screen and (min-width: 960px){ #header,#wrapper,.inner{ width:960px; padding:0; margin:0 auto; } .wrapper{ width:80%; margin:0 auto; text-align:center; } .gridWrapper{ padding-bottom:40px; overflow: hidden; padding-bottom:40px; /*display: inline-block;*/ display: block; /*margin: auto;*/ margin:0 auto; width:calc(269px * 3); } .grid{ float:left; border-radius:5px; background:#fff; } .box{ width: 230px; height: 60px; margin:0 5px; padding:10px; border:1px solid #f1f1f1; padding: 0.5em 1em; margin: 1em 0; background: #f4f4f4; border-left: solid 6px #acd16b; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); }
globalplus

2018/11/06 08:58

上記のコードのみを別のhtmlとcssファイルで作って見ると中央に表示されています。。。 しかし作成中のサイトですと中央じゃないんです。。。
退会済みユーザー

退会済みユーザー

2018/11/06 09:05

はい。上記のコーデではセンターになってますね。 だったら他のcssの読み込みはされていますか? bodyの条件とかが効いてセンター寄りになっていないのだと思われます。
globalplus

2018/11/06 10:53

x_xさんの助言によりmainのwidthを変更したら中央に寄りました。たくさんのご回答頂きありがとうございます。こんなに沢山のアドバイスを頂き、ベストアンサーは一人だけなのが申し訳ないくらいです。親身にわかりやすい説明して頂き有難うございました。フォローさせて頂きましたのでこれからもよろしくお願いします。
guest

0

中央寄せにしたいのは<h3>タグ部分のテキストの表示のことでしょうか?
それであれば text-align: center; で中央寄せにできますが

中央寄せと言われているイメージを教えていただけばお力になれるかもしれません。

投稿2018/11/06 07:02

oh_rusty_nail

総合スコア319

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

globalplus

2018/11/06 07:07

画像を追加しましたので見てみてください、boxの群れをそのまま中央揃えにしたいです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問