3

メッセージボックスを画面の解像度に合わせて中央に配置するのを手伝ってください。使用できるCSSまたはスタイル、マージン、左、右を表示できますか？

4

4 に答える 4

9

水平方向に中央に配置

divを水平方向に中央揃えするmargin: auto auto; width: 500pxには、幅が任意の幅になるように使用できます。

JSフィドル

HTML：

<div id="content">
    Some content
</div>

CSS：

#content {
    width: 200px;
    margin: auto auto;
    background-color: #CCC;
}

固定寸法の中央画面

コンテンツの高さと幅を固定できる場合は、cssだけを使用してdivを水平方向と垂直方向の両方の中央に配置することができます。これは、コンテンツを別のdivでラップし、コンテンツdivを配置してtop: 50%から、マージンの高さの半分を減算することで実現margin-top: -100pxされます。高さが200pxであると仮定します。以下の例を参照してください。

JSフィドル。

HTML：

<div id="wrapper">
    <div id="content">
        Some content
    </div>
</div>

CSS：

#wrapper {
    position: relative;
    background-color: #EEE;
    width: 200px;
    height: 200px;
    font-size: 10px;
}
#content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    margin-left: -40px;
    background-color: #DDD;
}

垂直方向に中央に配置されているふりをします

また、ほとんどのデスクトップおよびラップトップ画面で垂直方向の中央に表示されるように、固定margin-top（またはtopを使用）を指定できます。position: absolute

JSフィドル

HTML：

<div id="content">
    Some content
</div>

CSS：

#content {
    width: 200px;
    margin: 100px auto;
    background-color: #CCC;
}

Javascriptを使用する

cssだけを使用して、コンテンツを任意の高さで垂直方向に中央揃えすることはできません。この場合、Javascriptを使用してdivを配置する必要があります。

基本的な考え方は次のとおりです。

  • コンテンツを表示する必要があるとき、またはコンテンツが読み込まれるときに、コンテンツの高さを計算します。
  • 次に、多くのcssプロパティのいずれかを変更して、divを垂直方向の中央に配置します。

私の個人的な好みはあなたがposition: absolute財産topで使うことです。を使用することもできますmargin-topが、ページに他のコンテンツがある場合は、このdivがボックスモデルのスペースを占有することはおそらく望ましくありません。

JSフィドル

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var el = $('#content');
    var elWidth = el.width();
    var elHeight = el.height();

    el.css({
        position: 'absolute',
        top: (windowHeight / 2) - (elHeight / 2),
        left: (windowWidth / 2) - (elWidth / 2),
    });
});
</script>
<style>
#content {
    width: 200px;
    height: 200px;
    background-color: #CCC;
}
</style>
</head>
<body>
<div id="content">
    Some content
</div>
</body>
</html>

利用可能な多くのJavascript「プラグイン」のいずれかを使用します

Webには、ほとんどのWebサイトで使用する定型CSSを提供するCSSフレームワークが多数あります。そして、これらのいくつかは、小さなJavascriptプラグインでのこの種の一般的なプレゼンテーションの問題にも役立ちます。個人的には、 TwitterBootstrapがこの目的に使用できるモーダルプラグインを提供していることを知っています。コンテンツをページの中央に配置することを唯一の目的とする多くのjQueryプラグインもあります。

結論

これを実現するためのオプションは多数ありますが、CSSがまだこれをサポートしていないのは悲しいことです。たぶん、さまざまなシナリオで行うのは難しいことですが、私にはわかりません。上記のオプションから、Javascriptオプションが最も用途が広く、今日のブラウザーの速度と、ブラウザーでJavascriptを無効にする人がいない可能性があるため、これが最善の方法だと思います。

于 2013-02-18T08:13:07.460 に答える
2

CSSテクニックのページでそれを行う方法について読んだ後、私はこれを見ました。

基本的に、少しCSSを定義します。

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

利点：

  • クロスブラウザ（IE8-10を含む）

  • 特別なマークアップなし、最小限のスタイル

  • パーセンテージと最小/最大-でレスポンシブ

  • 1つのクラスを使用してコンテンツを中央に配置します

テストする時間がありませんでしたが、他の人の役に立つことを願って、ここに投稿したいと思いました。

于 2013-12-04T22:36:36.307 に答える
0

これがあなたが検索しているものですhttp://tutorialzine.com/2010/03/centering-div-vertically-and-horizo​​ntally/

jqueryで簡単に作成できます！または、このサイトで提供されているcssソリューションを使用してください。

于 2013-02-18T07:36:29.920 に答える
0

試したコードを教えてください。以下のようなHTMLコードがあると仮定します。

<div id="message">
   Hello World!
</div>

CSSコード：

#message {
   width: 100px;
   height: 100px;
   margin: 50px auto;
}

次に、メッセージボックスは画面の上部から100x100および50pxになり、画面の中央に自動的に配置されます。

于 2013-02-18T07:37:05.363 に答える