4

私はちょうど何かに出くわしました

#element {
    left: 50%;
    margin-left: -(elemntwidth/2)px; 
}

たとえば、(elemntwidth/2) は既に 30px のような数値です。

これがレスポンシブ要素の配置をクロスブラウジングする安全な方法であるかどうかを知りたいので、.jQueryで現在行っている方法を放棄できます

$('#element').css(left: (screenwidth - element / 2) + 'px');

何よりも、クロスモバイルデバイスブラウザーの効果的なソリューションに興味があり、この css のみがクリーンでシンプルであることがわかったので、これが真実であるかどうかを尋ねる必要があります。ありがとう

4

5 に答える 5

2

これが方法です。一部の要素では、それは機能し、応答性があり、中央に配置され、jQueryはありません。

HTML

<div class="element ver1">TESTE</div>
<div class="element ver2">TESTE</div>
<div class="element ver3">TESTE</div>
<div class="element ver4">TESTE</div>

CSS

.element {
     position: relative;
     width: 90%;
     background: black;
     margin: 0 auto 10px;
     text-align: center;
     color: white;
     padding: 20px 0;
}
.ver1{width: 80%;}
.ver2{width: 70%;}
.ver3{width: 60%;}
.ver4{width: 40%;}

デモを壊す| 最終結果全画面

于 2013-01-08T21:04:36.133 に答える
2

CSSフレームワークには、この機能が組み込まれています。チェックアウト：Foundation 3

それ以外の場合は、ピクセルの完全性を実現するために、Javascriptとメディアクエリに大きく依存する必要があります。

言うまでもなく、これはクロスデバイス/ブラウザの安定した要素を達成するために遭遇する多くの問題の最初のものです。これらのことはすべて、あなたのために慎重に考え抜かれています。

于 2013-01-08T20:56:58.133 に答える
1

中心に配置している要素の寸法を知っている限り、使用しているコードは機能します（私は同じアプローチを何度も使用しました）。

パーセンテージベースの幅を使用して同じアプローチを使用して、レスポンシブレイアウトでより適切に機能することができることに注意してください。

あなたは正しい方向に進んでいます。

于 2013-01-08T21:28:43.517 に答える
1

このソリューションはブラウザと互換性があります。{margin-left：auto;よりも優れています。margin-right：auto;}場合によっては。しかし、DOM要素をこのように中央に配置することによる他の興味深い点があります。

たとえば、ページラッパー全体が{left：50％、...}の中央にあり、ブラウザウィンドウの幅がラッパーよりも小さい場合、左右にスクロールしてもコンテンツ全体を表示することはできません。ブラウザがコンテンツをカットします。それを試してみてください...

左右にスクロールして、白い左右の境界線を確認してください...

他の既知の解決策は、{margin-left：auto;を設定することです。margin-right：auto;}ですが、これは{position：relative;}と一緒に機能します-{position：absolute;}とは一緒に機能しません-要素

私がこの型破りな解決策を始めたのは久しぶりです...

于 2013-01-08T21:34:41.867 に答える
1

次のコード スニペットを使用します。

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -(height/2);
  margin-left: -(width/2);
}

これは、親の寸法が変わっても機能します。

于 2013-01-08T21:03:42.563 に答える