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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

3回答

9826閲覧

HTMLでのセンタリング

t1gerkngd0m

総合スコア26

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

2クリップ

投稿2017/10/31 15:37

HTMLの<center>タグで内容をセンタリングしたく思っていますが、

<ol>タグをセンタリングしようとしたところ、箇条書きの1、2、3などの文字の位置がそのままになります。 どうすれば箇条書きの数字もセンタリングされますか? なお、CSSは使わない方法でお願いします。
<center> <ol> <li>あ</li> <li>い</li> <li>う</li> <li>え</li> <li>お</li> </ol> </center>

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

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

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

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

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

guest

回答3

0

ベストアンサー

<center> はすでに廃止されています。

HTML5リファレンス(ABC順) を確認ください。
また、文法を判定するサイト html5lint もありますので、上手に活用しましょう。

html

1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 body { 8 width: 100%; 9 } 10 ol { 11 width:50%; 12 margin-left: auto; 13 margin-right: auto; 14 } 15 </style> 16 </head> 17 <body> 18 <ol> 19 <li></li> 20 <li></li> 21 <li></li> 22 <li></li> 23 <li></li> 24 </ol> 25 </body> 26</html>

要素の中央配置は、以下のように考えます。

  1. 中央に置きたい要素 olwidth を与えます。
  2. ol の親要素 例では bodywidth を与えます。
  3. 中央に置きたい要素に margin の左右方向に、auto を設定します。

投稿2017/10/31 15:52

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

t1gerkngd0m

2017/11/01 01:21

ありがとうございます。 イメージに近いものが得られました
guest

0

CSSを使わず、というのは**「物理的に無理」**です。

一番簡単なやり方はインラインCSSでlist-style-position:insideをつけてやることです。list-style-positionはリストの番号などの場所を「要素の外」にするか「要素の中」にするかを決めることができます。現在リストの数字の部分は「要素の外」扱いになっているので、centerタグで「要素」だけがセンタリングされ、数字部分がついてこないことが原因です。なので、数字部分も「要素の中」にしてしまえば、数字ごとセンタリングされます。

HTML

1<center> 2<ol style="list-style-position:inside;"> 3<li>あ</li> 4<li>い</li> 5<li>う</li> 6<li>え</li> 7<li>お</li> 8</ol> 9</center>

投稿2017/11/01 00:29

編集2017/11/01 00:30
masaya_ohashi

総合スコア9206

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

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

t1gerkngd0m

2017/11/01 01:20

ありがとうございます。 なんとなくイメージしていたものは得られました
guest

0

"html センタリング" で google 検索してみると情報が得られます。

検索結果からのピックアップ

  • CSSで中央寄せする9つの方法(縦・横にセンタリング)

https://saruwakakun.com/html-css/basic/centering

  • HTML5 & CSS3 リファレンス <center> x - 中央ぞろえ (廃止)

http://www.osaka-kyoiku.ac.jp/~joho/html5_ref/center.php

投稿2017/11/03 22:16

katoy

総合スコア22324

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問