html - このアラートを水平方向に中央揃えにするにはどうすればよいですか?

Question

ユーザーがボタンをクリックしたときにアラートを表示しようとしていますが、アラートを水平方向の中央に配置する方法がわかりません。アラートを #main 内にとどめたいと思います。このフィドルを参照してください。

ありがとう！

Answer 1

#mainにposition以外があることを確認してstaticから、アラートに次のルールを割り当てます。

position: absolute;
left: 50%;
top: 50%;
margin-left: -width;
margin-top: -height;

widthとheightを正しい値に置き換えます。

Answer 2

@Darkwater によって提案された css による解決策は正しいので、しばらく前に、まだ CSS を使用している jQuery 用のこのプラグインを作成して、複数のオブジェクトですばやく再利用できるようにしました。

という名前の jQuery 用の新しいメソッドを作成しますcenter。

$.fn.center = function() {
    this.css("position","absolute").css("z-index","5000")
    .css("top","50%").css("left","50%")
    .css("margin",(-(this.height()/2))+"px 0 0 "+(-(this.width()/2))+"px"); 
    return this;
};

div#message次に、次の直後にオブジェクト (この場合はアラート) にバインドします.show()。

$("#message").show().center();

そして、divは垂直方向と水平方向の両方で中央に配置されます。

編集:私の知る限り、jQueryは非表示の要素を適切に処理できないため、要素をDOMに表示するcenter()メソッドまたは同様のメソッドの直後にメソッドをバインドすることを忘れないでください。show()

Answer 3

position: fixed;use position: relative;for#mainとposition: absolute;forを使用し#messageてメッセージをシフトdivインするのではなく、マークアップと CSS の配置が実際には間違っています。#main div

そして計算部分ですが、 a を中央揃えにしたいときは、 のdivを与えて垂直方向中央に持ってくる必要があります..top: value (-)minus heightdiv

私のフィドル

Answer 4

#message{
  display: none;
  position: relative;
  top: 50%;
  text-align: center;
}