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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+1
「チャットの文字が表示される箇所」がどこか分からないんですが、
コードを見る限り、テキストエリアとボタンとclick meのブロックをセンタリングしたいんですよね？
だとすれば、これでいけると思います。
CSS の width は適したサイズに変更する必要がありそうですが。（800pxぐらい？）
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
「margin」の直前に全角の空白とか入っていませんか？
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+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>投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
check解決した方法
0
ありがとうございました。
<link rel="stylesheet" href="reset.css">
のコードを追記し解決しました。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
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が短すぎる可能性もあると思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 90.48%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/04/13 01:14
なぜか動きません。。。