1

我是使用 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 上的显示方式... pic1 http://www.startingtofeelit.com/images/pic1.png

这是我或多或少希望它显示的方式... pic2 http://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 回答