ホームページを作っています。
今、更新履歴を表示するボックスを作りました。
<div align="left" style="overflow-y:scroll;width:300px;height:100px;border:solid 1px #818181">
<center><b>更新履歴</b></center>
<br>2015 8/02 - 更新2
<br>2015 7/28 - 更新1
<br>2015 7/20 - HP開設<br><br>
</div>
このように作っています。
これを中央寄せさせたいのですが、うまく中央寄せされません。
方法を教えて下さい。よろしくお願いいたします。
No.5ベストアンサー
- 回答日時:
外枠は、ページ内で中寄せ
枠内の文章は、枠内で中寄せ
ただし箇条書きは、枠内で左寄せ
<style>
aside.diary { overflow:auto; width:300px; height:100px; border:thin solid gray; }
aside.diary { display:block; margin:0 auto; } /* 外枠を中寄せ */
aside.diary { text-align:center; } /* 枠内の文章を中寄せ */
aside.diary ul { list-style:none; padding:0; margin:1ex; }
aside.diary ul li { text-align:left; } /* 箇条書きを左寄せ */
</style>
<aside class=diary>
<b>探査機日程</b>
<ul>
<li>2015-07-14 : 冥王星に接近
<li>2014-08-25 : 海王星軌道を通過
<li>2011-03-18 : 天王星軌道を通過
<li>2008-06-08 : 土星軌道を通過
</ul>
</aside>
No.7
- 回答日時:
margin:0 autoはブロックだけ中心に寄せてくれる。
古いIEの互換モードの場合は、ol#Historyに対してtext-alignにして、li要素の幅を決めるとli要素は中心に来る。その後li内でtext-align:center;
でも、いまや必要ないでしょう。ちゃんとウェブ標準で作成するほうが良いです。
[HTML5版]HTML4.01に比較するとわかりやすくなりますね。
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<meta name="description" content="">
_<meta name="author" content="IRUKA">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5. …
<script src="http://css3-mediaqueries-js.googlecode.com/svn/t …
<![endif]-->
_<link rel="stylesheet" href="css/style.css">
_<style media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
body>header,body>section,body>footer{
_width:90%;min-width:630px;max-width:900px;
_margin:0 auto;
_padding:5px;
_position:relative;
}
body>section{
_min-height:400px;
}
ol#History{
_overflow-y:scroll;
_width:300px;height:100px;
_border:solid 1px #818181;
_margin:5px auto;
_list-style-type:none;
}
section>h2,body>section>section{
_margin:0 210px;
}
section>nav,section>aside{
_position:absolute;top:0;
_width:200px;
_height:100%;
}
section>nav{left:0;}
section>aside{right:0}
/* 判りやすいよう色分け */
body{background-color:gray;}
header,footer{background-color:aqua;}
section{background-color:silver;}
section section{background-color:white;}
section nav{background-color:lime;}
section aside{background-color:yellow;}
-->
_</style>
</head>
<body>
_<header>
__<h1>タイトル</h1>
__<p>このページのheader</p>
_</header>
_<section>
__<h2>見出し</h2>
__<ol id="History">
___<li>2015/8/02 - 更新</li>
___<li>2015/7/28 - 更新</li>
___<li>2015/7/20 - 更新</li>
___<li>2015/7/12 - 更新</li>
___<li>2015/7/10 - 更新</li>
__</ol>
__<section>
___<h3>項記事</h3>
___<p>
____section(本文)はHTML5で導入される要素、sectionの階層で本文文書のツリー構造を示す。
___</p>
__</section>
__<nav>
___<h3>ナビゲーション</h3>
___<p>
____ナビゲーションはnav
___</p>
___<ul>
____<li>最初</li>
____<li>次</li>
___</ul>
__</nav>
__<aside>
___<h3>補足</h3>
___<p>
____本文とは直接関係ない記事はaside
___</p>
__</aside>
_</section>
_<footer>
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</footer>
</body>
</html>
No.6
- 回答日時:
更新履歴ですから、序列リストでマークアップされているとします。
<ol>
<li>2015 8/02 - 更新</li>
<li>2015 7/28 - 更新</li>
<li>2015 7/20 - 更新</li>
<li>2015 7/12 - 更新</li>
</ol>
★DIV,CENTER,BRは使うべきではありません。(後で)
ブロック要素の中心寄せですから、marginright:auto,margin-left:auto;です。上下のマージンと合わせて、margin:5px auto;でもよいです。
<ol style="overflow-y:scroll;width:300px;height:100px;border:solid 1px #818181;margin:5px auto;">
たったこれだけで、すむはずです。なお、序列リストの番号が不用でしたら、list-style-type:none;で消せば良いです。
text-alignは、文字通りテキストの中央配置でブロックには無効です。(IEの7以前はバグでブロックが中心に寄っていた)
【もっと重要なこと】
★DIV要素は、文書内でそのブロックの(意味的な)構造をマークアップするための物で、デザインのために使用するものではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
★HTML5ではDIVは安易に使えません。HTML5では文書構造を示す要素(タグ)が追加されたことに伴って
『NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/2014/REC-html5-20141028/gro … )』
「警告:著者は他に適切な要素がないときの最後の手段としてDIV要素を使ってマークアップすることを強く推奨する。」
★CENTER要素は、HTML4.01(1999年)に非推奨となりました。
『CENTER要素は、DIV要素でalign属性を"center"に設定することと全く等価である。 CENTER要素は推奨しない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
★BRは使うべきではありません。
これはひとつの段落内でありながら、改行が必要な場合のみ使用します。例えば住所とか・・・それ以外は使いません。この場合は異なる更新情報ですから使ってはなりません。
★ウェブ標準で作成して、ブラウザが標準モードで起動するようDOCTYPEスイッチ( https://www.google.co.jp/search?q=DOCTYPE%E3%82% … )を適切に書くと、ブラウザ間の誤差はなくなります。すなわち、HTML4.01strict + CSS2.1をつかう。
HTML4.01とHTML5の簡単なサンプル・・
★こんな簡単なHTMLで希望の物になります。
メンテナンスも容易でSEOも完璧、携帯電話でもスクリーンリーダーでも、点字端末でも印刷も、そのまま利用できる。もちろんブラウザの画面幅にも依存しない。印刷プレビューでごらんなさい。
★タブは_に置換してあるので戻す。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
も満点だと思います。(右上のDATAを使ってチェック)
[HTML4.01版]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css" media="screen">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{
_width:90%;min-width:630px;max-width:900px;
_margin:0 auto;
_padding:5px;
_position:relative;
}
div.section{
_min-height:400px;
}
ol#History{
_overflow-y:scroll;
_width:300px;height:100px;
_border:solid 1px #818181;
_margin:5px auto;
_list-style-type:none;
}
div.section h2,div.section div.section{
_margin:0 210px;
}
div.section div.nav,div.section div.aside{
_position:absolute;top:0;
_width:200px;
_height:100%;
}
div.section div.section{
_width:auto;min-width:0px;
_position:static;
_}
body{background-color:gray;}
div.section div.section{min-height:0;}
div.section div.nav{left:0;}
div.section div.aside{right:0}
div.header,div.footer{background-color:aqua;}
div.section{background-color:silver;}
div.section div.section{background-color:white;}
div.section div.nav{background-color:lime;}
div.section div.aside{background-color:yellow;}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<ol id="History">
___<li>2015/8/02 - 更新</li>
___<li>2015/7/28 - 更新</li>
___<li>2015/7/20 - 更新</li>
___<li>2015/7/12 - 更新</li>
__</ol>
__<div class="section">
___<h3>項記事</h3>
___<p>
____sectionはHTML5で導入される要素・
___</p>
__</div>
__<div class="nav">
___<h3>ナビゲーション</h3>
___<ul>
____<li>最初</li>
____<li>次</li>
___</ul>
__</div>
__<div class="aside">
___<h3>補足</h3>
___<p>
____本文とは直接関係ない記事
___</p>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</div>
</body>
</html>
No.3
- 回答日時:
まぁいまだにIEの互換を気にするのはどうかと思いますが
外側でセンタリングするのとmarginをいじるので対応可能でしょう
<div style="text-align:center">
<div align="left" style="overflow-y:scroll;width:300px;height:100px;border:solid 1px #818181;margin:auto;">
<center><b>更新履歴</b></center>
<br>2015 8/02 - 更新2
<br>2015 7/28 - 更新1
<br>2015 7/20 - HP開設<br><br>
</div>
</div>
No.2
- 回答日時:
何に対してセンタリングするのかちょっとまだ良くわからないので3パターン用意してみました。
開いてもらうと一目瞭然ですが、
その1はブラウザに対してです。
その2に関してはセンタリングといいますか、
marginで左側に余白を作るような形で作成してみました。
その3は更新内容用のsampleボックスに幅を適当に指定して
文字数が長くなった場合を想定してみました。
色々なパターンがあると思いますが、
やはり文字数によってセンタリングをどう捉えていくのかが難しいですね。
//その1
<div id="sample" align="center">
<div align="left" style="overflow-y:scroll;width:300px;height:100px;border:solid 1px #818181">
<center><b>更新履歴</b></center>
<br>2015 8/02 - 更新2
<br>2015 7/28 - 更新1
<br>2015 7/20 - HP開設<br><br>
</div>
</div><!--sample-->
//その2
<div align="left" style="overflow-y:scroll;width:300px;height:100px;border:solid 1px #818181">
<center><b>更新履歴</b></center>
<div id="sample" style="margin-left:70px;">
<br>2015 8/02 - 更新2
<br>2015 7/28 - 更新1
<br>2015 7/20 - HP開設<br><br>
</div><!--sample-->
</div>
//その3
<div align="left" style="overflow-y:scroll;width:300px;height:100px;border:solid 1px #818181">
<center><b>更新履歴</b></center>
<div id="sample" style="width:240px;margin:0 auto;">
<br>2015 8/15 - 終戦記念日のお知らせです
<br>2015 8/02 - 更新2
<br>2015 7/28 - 更新1
<br>2015 7/20 - HP開設
</div><!--sample-->
</div>
No.1
- 回答日時:
brの使い方はもう少し考えた方が良いと思いますが、
とりあえずdiv id="sample"で内側を更に囲ってみました。
<div align="left" style="overflow-y:scroll;width:300px;height:100px;border:solid 1px #818181">
<div id="sample" align="center">
<b>更新履歴</b>
<br>2015 8/02 - 更新2
<br>2015 7/28 - 更新1
<br>2015 7/20 - HP開設<br><br>
</div><!--sample-->
</div>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS imgとpを縦・横に中央揃えする 1 2023/01/17 11:30
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
初心者html・CSS ウィンドウを...
-
safariだけCSSが崩れてしまいます
-
画像だけを端に寄せる方法
-
CSS、width100%でもできる余白
-
HTMLで一部だけスクロールする...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
safariだけ、cssが効きません!
-
div領域をウインドウサイズに合...
-
z-indexで上になっている要素だ...
-
safariでの横並びリスト(List...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
borderをページの下まで伸ばしたい
-
ヘッダーの画像にメインエリア...
-
border-style:solidで文字がずれる
-
中点「・」の改行について
-
widthやheightの数値に単位(px...
-
form input テキストを上下中央...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
form input テキストを上下中央...
-
スクロールボックスを中央に配...
-
【CSS】ヘッダーの高さが不明の...
-
CSS:animation開始位置の設定
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
CSSで背景画像を一番下にもって...
-
【HTML】【CSS】【Swiper】 元...
-
CSSでボックスのheightが0になる
-
divで囲まれたpaddingの指定を...
-
CSSで指定した背景画像にリンク...
-
【HTML&CSS】フッター下部の余...
-
HTMLのiframeの入れ子について
-
画像と一緒にスライドするリン...
-
ページを拡大縮小でborderが消...
おすすめ情報
回答有難うございます。
回答していただいたものをコピペして使ってみましたが、
更新内容が中央に寄った上、センタリングもされていませんでした。
センタリングしつつ、中の要素は左揃えにしておきたいです。
要素は左揃えにしつつ、ページの真ん中に寄せたいです。