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

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

質問する

ただいまの
回答率

88.33%

margin:0 auto;の中央揃えができません。

解決済

回答 5

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 5,056
yahret45

yahret45

score 40

margin:0 auto;の中央揃えができません。イタリックテキスト

milkcocoaでチャットアプリを作成しておりますが、
チャットの文字が表示される箇所をブラウザ画面の左端ではなく中央揃えにしたいと考えています。

そこで、html、cssに以下のコードを記載していますが、左端に表示されたままになっております。
お知恵をお貸し頂けますでしょうか。

HTML

<div class="center">
   <textarea id="msg" cols="100" rows="7"></textarea>
      <button id="button">メッセージ送信</button>
      <ul id="board">
      <div id="sample" onclick="addElement()">click me</div>   
</ul>
</div>

CSS

.center {
    width:100px;
    height:100px;
    margin:0 auto;
}   

=========================

<script>
//全て読み込んでから処理
$(function(){

    //データストアを作成（データを送受信するために必要）
    var milkcocoa = new MilkCocoa('flagimsrjhlt.mlkcca.com'); //※ID自分のに変えてね！！
    //データベースストア：オブジェクト生成
    var chatDataStore = milkcocoa.dataStore("chat"); //アプリ名指定

    //送信処理（ボタンをクリック）
    $("#button").on("click",function(){
        var text = $("#msg").val(); //入力文字を取得
        var namecal = $("#name").val();
        var date = $("#date").val();
        //milkcocoa:send送信
        chatDataStore.push({message:text},function(e){
            $("#msg").val(""); //送信後、空っぽにする
        });
    });

    //受信処理（send受信）
    chatDataStore.on("push",function(data){
        console.dir(data);
        $("#board").append("<li>"+data.value.message+"<button id='button'>私も聞きたい！</button></li>");
    });

});
</script>

</head>
<body>
<div class="center">
   <textarea id="msg" cols="50" rows="7"></textarea>
      <button id="button">メッセージ送信</button>
      <ul id="board">
      <li id="sample" onclick="addElement()">click me</li> 
</ul>
</ul>
</div>
</body>

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5 件

link

+1

「チャットの文字が表示される箇所」がどこか分からないんですが、
コードを見る限り、テキストエリアとボタンとclick meのブロックをセンタリングしたいんですよね？
だとすれば、これでいけると思います。
CSS の width は適したサイズに変更する必要がありそうですが。（800pxぐらい？）

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/13 01:14

    これで、とは自分が最初に提示したコードですよね。自分も同感ですが、
    なぜか動きません。。。

    キャンセル

link

+1

「margin」の直前に全角の空白とか入っていませんか？

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/13 01:02

    コメントありがとうございます。入っていなかったようです。。

    キャンセル

  • 2016/04/13 01:37

    ブラウザのデベロッパーツールを使うとエラーの発見が早いですよ..
    私の主観ですが　chromeが一番解かり易いです
    問題個所を右クリックして「検証」です

    キャンセル

link

+1

</ul> が一つ多くないですか？ 

<body>
<div class="center">
   <textarea id="msg" cols="50" rows="7"></textarea>
      <button id="button">メッセージ送信</button>
      <ul id="board">
      <li id="sample" onclick="addElement()">click me</li> 
</ul>
</ul><!-- ←ここのulが不要 -->
</div>
</body>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/13 01:53

    ありがとうございます。修正しました。

    キャンセル

link

check解決した方法

0

ありがとうございました。
<link rel="stylesheet" href="reset.css">
のコードを追記し解決しました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/13 02:00

    よかったですね、ひとまず「解決済」にされてはいかがでしょうか。

    キャンセル

link

0

以下のリンク先の方法で対応できないでしょうか？

様々な要素を中央揃えにする

簡単なのは 

.center{
   text-align:center;
}


もしくは,<div class="outer"></div>でdomを包んで, 

.outer {
    position:relative; /* 絶対配置の基準点 */
    margin:0 auto; /* ブロック要素の中央揃え */
    text-align:center; /* インライン要素の中央揃え */
}
.outer .center {
    position:absolute; /* 絶対配置 */
    top:50%; /* 上から半分 */
    left:50%; /* 左から半分 */
    width:100%; /* 大枠と同じ幅に */
    margin:-1.5em 0 0 -50%; /* 要素の大きさの半分引く */
}

などwrapperを作ってやるのがメジャーな方法だと思います。

また,質問者様のコードも問題ないように思えるので,widthが短すぎる可能性もあると思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/13 01:10

    .center{
    text-align:center;
    }を使っても直りません。コードは問題無いはずなんですが。。。

    キャンセル

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

  • ただいまの回答率 88.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る