Question

我刚接触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

感谢您的帮助。

Answer 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; }

如果您有任何问题，请告诉我。

Answer 2

我更喜欢使用绝对和相对位置:)，几乎我看到你试图在你的css中实现，为了上，左，右和下工作你必须设置一个位置（绝对，相对或固定）并使用箭头作为背景

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

Div中的Div和垂直居中图像

2 个答案: