2

jsFiddleDIVで画像を中央に垂直に配置することはできますが、Webサイトで行うと同じように機能しません。これは、見つけられない一部のCSSと競合しているようです。

jsFiddleの例で使用したものと同じCSSを使用しています。実際のウェブサイトでは、ロゴは常に一番上の位置に配置されます。

これに関して助けていただければ幸いです。

解決

<script type="text/javascript">
    $(document).ready(function () {
        var h = $("#BannerSlider").height();
        $.map($("#BannerSlider img"), function (e) {
            var top = (h - $(e).height()) / 2;
            $(e).css("margin-top", top);
        });
    });
</script> 
    <title></title>
    <style>
.SponsorLogos
{
    width:600px;
    margin-top:50px;
    margin-left:60px;
    min-height:550px;
    background:red;
}
.SponsorLogoWrapper
{
    width:160px;
    height:160px;
    margin-right:30px;
    margin-bottom:30px;
    border:1px solid #78AC1B;
    line-height:160px;
    text-align:center;
    overflow:hidden;
    float:left;

}
.SponsorLogoWrapper img
{
    display: inline-block;
    border:0px;
}

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <div class="SponsorLogos">

          <div id="BannerSlider" class="SponsorLogoWrapper" >
               <img src="http://www.nikolakis.net/liquidcarousel/images/01.jpg" width="88" height="126" alt="image"/>
               </div>
         <div id="BannerSlider" class="SponsorLogoWrapper" >
                <img src="http://www.nikolakis.net/liquidcarousel/images/02.jpg" width="88" height="110" alt="image" />
                 </div>
        <div id="BannerSlider" class="SponsorLogoWrapper" >
                <img src="http://www.nikolakis.net/liquidcarousel/images/03.jpg" width="88" height="100" alt="image"/>
                       </div>
         <div id="BannerSlider" class="SponsorLogoWrapper" >
                <img src="http://www.nikolakis.net/liquidcarousel/images/04.jpg" width="88" height="126" alt="image"/>
                       </div>
        <div id="BannerSlider" class="SponsorLogoWrapper" >
                <img src="http://www.nikolakis.net/liquidcarousel/images/05.jpg" width="88" height="90" alt="image"/>
           </div>
</div>

    </div>
    </form>
4

2 に答える 2

4

jsFiddle DOCTYPEをWebサイトに一致するように切り替えると、画像は再び上に揃えられます（これは左側の情報パネルで行うことができます）。

そのことを念頭に置いて、次の答えを確認できます。Vertical-alignがXHTML 1.0 Transitional doctypeで機能しない？

最初のコメントへの応答

最も簡単な方法は、DOCTYPEを変更することです。それができない場合は、別の方法を完全に見つける必要があります。垂直方向の配置はテーブルで最適に機能するため、display小道具をテーブルベースに変更できます。次に例を示します。http：//jsfiddle.net/64UnS/1/

これを実装できるかどうかはわかりません。ブラウザのサポートはさまざまです。もちろん、あなたはdisplay: inline-block;すでに使用していて、IE7のフォールバックは見られなかったので、おそらくこれで問題ありません。

その他のオプションには、次のものがあります。

  • 画像を160x160pxにする
  • 各画像が タグにbackground-imageインラインとして出力されるようにマークアップを変更します。<a />これにより、中央揃えが簡単になります（もちろん、画像のサイズを確認する必要があります。 background-sizeサポートはさらにサポートされていません） 。
  • <head /> javascriptソリューションを使用します（私はあなたがすでにjQueryを持っているのを見ます）

お役に立てば幸いです。

于 2012-08-13T11:01:41.077 に答える
0

これは、実際のWebサイトがXHTMLトランジショナルDoctypeを使用し、JS fiddleがHTML5（html）Doctypeを使用しているためだと思います。

于 2012-08-13T11:06:36.777 に答える