10 
<div class="preview">
  <span class="center">This will be centered</div>
</div>

Preview has fixed width (120x120), but span may contain anything (image, text). How do I center it vertically and horizontally using jQuery? I looked up some snippets but they all center elements inside the 'body' not another element. I'd like to avoid use a 'plugin' for this if possible.

Many thanks!

4

6 に答える 6

14

最新の jQuery UI には位置コンポーネントがあります。

$("#myDialog").position({
   my: "center",
   at: "center",
   of: window
});

ドキュメント: http://jqueryui.com/demos/position/
取得: http://jqueryui.com/download

于 2010-09-03T02:13:28.833 に答える
4

jQueryを使用してもかまわないため、CenterElementPluginを使用できます。

それは行うのと同じくらい簡単です：

$(".preview").center();
于 2009-12-23T17:38:40.357 に答える
2

CSS のみのソリューションを使用できます (IE を無視します)。

<div class="preview" style="display:table-cell;vertical-align:middle;text-align:center;margin:0 auto"> <span class="center">This will be centered</div> </div> display:block の使用も機能しますが、水平方向の配置のみで、垂直方向の配置の場合は、上記のコードに従ってテーブルをエミュレートするか、代わりに JavaScript を使用する必要があります。

于 2009-12-23T22:26:14.647 に答える
1

独自の関数を jquery に追加できます。

// Centers on div
jQuery.fn.center = function (div) {
this.css("position", "absolute");

var position = div.position();
this.css("top", Math.max(0, ((div.height() - this.outerHeight()) / 2) + position.top) + "px");

this.css("left", Math.max(0, ((div.width() - this.outerWidth()) / 2) + position.left) + "px");
return this;
};

使用する：

$('#ajxload').center($('#mapWrapper')).show();

「 jQuery を使用して DIV を画面の中央に配置する」のコードから概念を取り入れました。

于 2012-11-27T18:23:43.787 に答える
0

CSS を使用してそれを行うことができます。
この投稿は良い解決策を提供します - http://mindthesemicolon.com/how-to-center-an-element-vertically-and-horizo​​ntally
-using-css / 基本的に:
1.子を絶対位置に設定します。
2. 親を相対位置に設定します。
3. 子の左と上を 50% に設定します。
4. translate(-50%,-50%) を使用して、子要素の幅の半分だけ左と上に移動します。

于 2015-02-11T06:08:31.153 に答える