

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

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

[code]

    .center {
        width:100px;
        height:100px;
        margin:0 auto;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2016-04-12T15:32:54.343
23966
2016-04-13T16:03:36.807
2016-04-12T15:40:24.897
5337
14665
question
html css
margin:0 auto;の中央揃えができません。


この振る舞いは`<textarea>`のタグのことに関係があると思います。`<textarea>`の`cols`の属性の代わりに`css`の`width`とかのプロパティを使用するのはいかがでしょうか。

例えば：

[code]

    <html>
    <head>
    <style>
    .center {
      width:100px;
      height:100px;
      margin:0 auto;
    }
    #msg {
      width:100px;
    }
    </style>
    </head>
    <body>
    <div class="center">
      <textarea id="msg" rows="7"></textarea>
      <button id="button">メッセージ送信</button>
      <ul id="board">
        <div id="sample" onclick="addElement()">click me</div>     
      </ul>
    </div>
    </body>
    </html>
    
[/code]

あと、`<textarea>`の`rows`の代わりに`css`の`height`というプロパティを使用することも出来ると思いますが。

また、別の問題ですが、`<ul
id="board">`の文を見ると`<li>`の代わりに`<div>`が差し入れているのは大丈夫でしょうか。`<ul>`の直後、[`<li>`の方がまし](https://stackoverflow.com/a/11755657/1167750)だと思いますが・・・`<li>`文の内には`<div>`が[使われる](https://stackoverflow.com/a/3011947/1167750)と思いますね。


CC BY-SA 3.0
2016-04-12T15:58:04.497
23970
2016-04-13T16:03:36.807
2017-05-23T12:38:55.307
-1
4129
23966
answer