0

これを解決する前に、私が扱っている制約を注意深く読んでください。

制約

  1. .pictureContainerそのままにしておく必要がありますposition: relative（ホバーメニューが絶対的に相対位置にあるためです）。

  2. 画像は80％未満になる可能性がありますが#slide、その場合でも中央に揃える必要があります。これは何に変換されますか？はい、この特定のケースを中心にするため、単純に行うことはできませんmargin: 0 10%が、画像がの幅の80％よりも小さい場合は満足できません。#slide

    こんにちは、私は別のインラインブロック要素の横に配置されているインラインブロック要素です、それは素晴らしいことではありませんか？それは素晴らしいことだと思います！

4

3 に答える 3

2

firtsはあなたをラップして htmldiv class="pictureContainer"にcssを与えようとしますwrapper

<div class="wrapper">        
    <div class="pictureContainer">
                <img id="currentPic" class="slideShowPic" src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg"  width="350" alt="IMAGE" />

                <div class="hoverMenu">
                    <a class="nextSlide" href="#">
                        >
                    </a>
                    <a class="prevSlide" href="#">
                        <
                    </a>
                </div>
          </div>
    </div>

css

.pictureContainer {
    width: 350px;
    position: relative;
    background: red;
    padding: 0;
    margin: 0;
}

#currentPic {
    vertical-align: top;
}
.wrapper {
    margin:auto;
    width: 350px;
}

作業デモ
はこの助けを願っています

于 2013-03-13T03:35:01.650 に答える
2

単純に追加しない理由:

text-align: center;

pictureContainerへのcss宣言。その中の任意の画像を中央に配置します。

于 2013-03-13T04:09:43.620 に答える