プロが教えるわが家の防犯対策術!

ホームページを作っています。
今、更新履歴を表示するボックスを作りました。

<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要素の左寄せ、中央寄せ、右寄せにつ」の補足画像1
    No.1の回答に寄せられた補足コメントです。 補足日時:2015/07/27 23:31
  • 要素は左揃えにしつつ、ページの真ん中に寄せたいです。

      補足日時:2015/07/27 23:33

A 回答 (7件)

外枠は、ページ内で中寄せ


枠内の文章は、枠内で中寄せ
ただし箇条書きは、枠内で左寄せ

<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>
    • good
    • 0

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>
    • good
    • 0

更新履歴ですから、序列リストでマークアップされているとします。


<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&#64;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>
    • good
    • 0

色々あるけど、午後でかけるので今晩になります。

    • good
    • 1

まぁいまだに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>
    • good
    • 0

何に対してセンタリングするのかちょっとまだ良くわからないので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>
    • good
    • 0

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>
この回答への補足あり
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!