Q&A
コメントありがとうございます。入っていなかったようです。。
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>
回答5件
0
</ul> が一つ多くないですか？
HTML
1 2<body> 3<div class="center"> 4 <textarea id="msg" cols="50" rows="7"></textarea> 5 <button id="button">メッセージ送信</button> 6 <ul id="board"> 7 <li id="sample" onclick="addElement()">click me</li> 8</ul> 9</ul><!-- ←ここのulが不要 --> 10</div> 11</body>
投稿2016/04/12 16:24
総合スコア69400
0
「margin」の直前に全角の空白とか入っていませんか？
投稿2016/04/12 15:32
退会済みユーザー
総合スコア0
ブラウザのデベロッパーツールを使うとエラーの発見が早いですよ..
私の主観ですが chromeが一番解かり易いです
問題個所を右クリックして「検証」です
0
自己解決
ありがとうございました。
<link rel="stylesheet" href="reset.css"> のコードを追記し解決しました。投稿2016/04/12 16:53
総合スコア41
よかったですね、ひとまず「解決済」にされてはいかがでしょうか。
0
以下のリンク先の方法で対応できないでしょうか？
簡単なのは
css
1.center{ 2 text-align:center; 3} 4
もしくは,<div class="outer"></div>でdomを包んで,
css
1.outer { 2 position:relative; /* 絶対配置の基準点 */ 3 margin:0 auto; /* ブロック要素の中央揃え */ 4 text-align:center; /* インライン要素の中央揃え */ 5} 6.outer .center { 7 position:absolute; /* 絶対配置 */ 8 top:50%; /* 上から半分 */ 9 left:50%; /* 左から半分 */ 10 width:100%; /* 大枠と同じ幅に */ 11 margin:-1.5em 0 0 -50%; /* 要素の大きさの半分引く */ 12}
などwrapperを作ってやるのがメジャーな方法だと思います。
また,質問者様のコードも問題ないように思えるので,widthが短すぎる可能性もあると思います。
投稿2016/04/12 15:27
編集2016/04/12 15:29退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/12 16:53