div中的div和垂直居中图像 [英] Divs and vertical centering images inside divs

问题描述

我是使用div的新手，所以我不太擅长使用它们。我正在制作一个音乐博客，我希望用户能够看到帖子的图片，并在任一侧的箭头转到下一个或以前的帖子。我无法在我的父级div中集中箭头。

我在网上搜索了一些东西，但似乎没有任何工作。这是我的CSS简单测试...

  #picture_wrapper {
 width：550px; 
背景颜色：＃00F; 
 float：left; 
} 
 
 #picture_container {
 width：500px; 
 float：left; 
 padding-left：5px; 
 padding-right：5px; 
} 
 
 #left_arrow_container {
 float：left; 
 top：50％; 
 width：20px; 
身高：100％; 
 background-color：＃F00; 
} 
 
 #right_arrow_container {
 float：right; 
 top：50％; 
 width：20px; 
身高：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

感谢您的帮助。

解决方案

对于 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; }


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

I'm new to working with divs, so I'm not too good at using them. I'm making a music blog, and I want the user to be able to see the picture for the post, and arrows on either side to go to next or previous posts. I'm having trouble centering the arrows in my parent div.

I searched a few things online, but nothing seemed to work. Here is my css for a simple test...

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

I set the arrow divs to have a background color of red, and I thought with this code the entire right and left sides would be red, but this is not the case. Only the area around my image is red. Here is the html that I am using.

<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>

Here is how it is being displayed on my Dreamweaver now... pic1 http://www.startingtofeelit.com/images/pic1.png

Here is how I more or less want it to be displayed... pic2 http://www.startingtofeelit.com/images/pic2.png

Thanks for the help.

解决方案

Sounds like a job for 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; }

​ Let me know if you have any questions.

这篇关于div中的div和垂直居中图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！