1

私はdivの操作に慣れていないので、divの使用はあまり得意ではありません。私は音楽ブログを作成しています。ユーザーが投稿の写真を表示できるようにし、両側の矢印で次または前の投稿に移動できるようにします。親divの矢印を中央に配置するのに問題があります。

オンラインでいくつか検索しましたが、何も機能していないようです。これが簡単なテストのための私のCSSです...

#picture_wrapper {
  width:550px;
  background-color:#00F;
  float:left;
}

#picture_container {
  width: 500px;
  float: left;
  padding-left:5px;
  padding-right:5px;
}

#left_arrow_container {
  float: left;
  top:50%;
  width: 20px;
  height:100%;
  background-color: #F00;
}

#right_arrow_container {
  float: right;
  top:50%;
  width: 20px;
  height:100%;
  background-color: #F00;
}

矢印のdivを背景色を赤に設定しました。このコードを使用すると、右側と左側全体が赤になると思いましたが、そうではありません。私の画像の周りの領域だけが赤です。これが私が使用しているhtmlです。

<div id="picture_wrapper">
  <div id="left_arrow_container"><img src = 'http://www.startingtofeelit.com/images/slider_left_arrow.png' width = '20' height = '34px'/></div>
  <div id="picture_container"><center><img src = 'http://www.startingtofeelit.com/wp-content/uploads/2012/07/DIIV+zachacry+cole+smith2.jpg' width = '500' /></center></div>
  <div id="right_arrow_container"><img src = 'http://www.startingtofeelit.com/images/slider_right_arrow.png' width = '20' /></div>
</div>

これが私のDreamweaverに表示されている方法です... pic1http://www.startingtofeelit.com/images/pic1.png

これが私が多かれ少なかれそれを表示したい方法です... pic2http://www.startingtofeelit.com/images/pic2.png

助けてくれてありがとう。

4

2 に答える 2

1

の仕事のように聞こえvertical-align: middle;ます。

http://jsfiddle.net/Wexcode/Lp5M9/2/

#picture_wrapper { 
    background: #F00;
    float: left;
    font-size: 0;
    white-space: nowrap; }
#left_arrow_container, #right_arrow_container {
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
#picture_container {
    background: #00F;
    padding: 0 5px;
    vertical-align: middle;
    display: inline-block; }

ご不明な点がございましたら、お気軽にお問い合わせください。

于 2012-07-27T22:34:31.840 に答える
0

私は絶対位置と相対位置を使用することを好みます:)、あなたがcssで達成しようとしていたこととほぼ同じです。上、左、右、下を機能させるには、位置（絶対、相対、または固定）を設定して使用する必要があります背景としてのあなたの矢

http://jsfiddle.net/wQqfp/2/

于 2012-07-27T22:35:28.830 に答える