CSS_html/css_WEB-ITnose で DIV 内の画像を垂直方向の中央に配置するように設定する方法

WBOY
リリース: 2016-06-24 12:27:59
オリジナル
1286 人が閲覧しました

位置決めのための DIV の使用は、現在ますます広く使用されています。
最近、DIV を使って画像の配置を行っていたところ、DIV では画像の垂直方向の配置を直接設定できないことに気づきました。
しばらく悩んでいたのですが、インターネットで解決策をたくさん見つけました。
しかしうまくいかないようで、その後、孟子第 E 章を発見しました (孟子第 E 章の知識の広さにとても驚きました)
他の人の質問に答えるための投稿に
非常に本物と思われる解決策があります。以下のように

< div id ="Layer1"
style ="position:absolute;
width:500px;
height:305px;
z-index:1;
background-color: #999999;
border: 1px 1 つ #000000;
padding-top:expression(this.style.top+(this.offsetHeight-mxh.offsetHeight)/2)"
align =center >
< img src ="http://sz.luohuedu .net /xml/Images/logo.gif" id =mxh >


使ってみたところ、やはり失敗することが分かりました。
その後、情報を確認したところ、彼の方法には 2 つの問題があることがわかりました。

this.style.topが取り出すのは数値ではなく50pxなどの文字列なので式での操作はできません。正しいメソッドは this.style.pixelTop プロパティで、数値が取り出されるようにする必要があります。 画像が DIV に配置された後、その上部属性値の計算はウィンドウの左上隅からではなく、DIV コンテナーの左上隅から開始されます。そのため、DIV の上部パディング距離は計算されません。 DIVの先頭の値に を追加する必要があります。

上記の2点を踏まえて、孟子の第E章のメソッドを少し修正して、次のメソッドを取得しました。テストに成功しました。
プロセス全体に多くの時間がかかったので、全員、特にまだ Expression を使用したことがない人がさらに遠回りするのを防ぐために、全員と共有するためにここに投稿します。

< div id ="Layer1"

style ="
位置:絶対;
左:261px;
上:50px;
幅:251px ;
高さ:105px; ボーダー: 1px ソリッド#0066cc; -top: 式 (this.Offsetheightheight-myImage.offsetheight)/2);
"
align =" center "& gt; ; img src = "12.gif" width ="70" height ="76" align =" absmiddle" id ="myImage" >




画像を処理する前に、画像に ID を与える必要があることを皆さんに思い出していただくための重要なポイントがあります。覚えておいてください~


孟子第 E 章の博学さに感謝します、ハハハ
孟子第 E 章の知識の広さに改めて驚かされます。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート