0

次のようになりますcss：

#search_bar {
  width: 300px;
  margin-left:475px;
  height:27px;
}

次のスナップショットのように、すべてのmointorで検索バーの同じ位置を生成しますか？

ここに画像の説明を入力してください

パーセンテージの単位のように、すべてのモニターでそれに応じてサイズが表示されますが、ピクセルでも同じですか？中央のスナップショットに表示されるように検索ボックスを揃えようとしていますが、私のものよりも広いモニターで同じように表示されるかどうかはわかりません。

4

3 に答える 3

2

モニターも画面解像度も、要素の配置方法とは関係ありません。重要なのはビューポートの幅/高さです（特にデスクトップユーザーは常にブラウザを最大化するとは限らないため）。ビューポートの幅が300ピクセルしかない場合、要素が中央に配置されないだけでなく、画面の外に表示されるほど右に移動します。ビューポートの幅が2000ピクセルの場合、ビューポートはひどく左に移動します。

ビューポートのサイズに関係なく、要素を完全に中央に配置するための2つのオプションがあります。

input.one {
    display: block;
    margin: 0 auto;
    width: 300px;
}

input.two {
    width: 300px;
    margin-left: -150px; /* half of the element's width */
    position: relative;
    left: 50%;
}

http://jsfiddle.net/bGMck/

于 2013-02-10T04:16:17.043 に答える
0

要素をピクセル単位で配置すると、その要素は絶対配置されていると言われます。つまり、ウィンドウのサイズが異なるユーザーは、ウィンドウが画面の中央に表示されない場合があります。

JavaScriptを使用して、ページの読み込みやウィンドウのサイズ変更時に、次のような中央の要素を再配置できます。

function doResize() {
    var elem = document.getElementById('myCenterDiv');
    var ww = window.innerWidth;
    var elemWidth = elem.offsetWidth;
    elem.style.left = (ww - elemWidth) / 2;
}
window.onload = doResize;
window.onresize = doResize;

または、CSSの方法でそれを行うことができます：

body {
    position: relative;
}
body > #myCenterDiv {
    position: absolute;
    top: 300px;
    width: 100px;
    height: 80px;
    margin: 0 auto; /* This centers the element */
}
于 2013-02-10T02:17:10.860 に答える
-1

古いHTMLバージョンでは、<center>現在は存在しないというものがありました。HTML5で何かを中央に配置するには、cssに次のように記述します。

margin-left:auto;
margin-right:auto;

これにより、すべてのオブジェクトが中央に配置されます。

中央に配置したくない場合は、Javascriptを使用できます。

var screen = screen.availWidth;
var gapPercent = 20;
var gap = gapPercent/screen;
document.getElementById('search_bar').style.margin-left = "gap + 'px'";

正確なコードがわかりません。コードを試して、document.get ......が正しく記述されているかどうかを確認してください。そうすれば、機能します。私はかなり長い間jsを使用していません。

于 2013-02-10T02:42:42.950 に答える