Question

css怎样使得图片底部对齐

css：
.picbox{ width:660px; height:350px; position:relative; padding-top:200px; transition:1s; margin:0 auto;}
.picbox img{ position:absolute; width:93px; height:117px; opacity:0.5; padding-bottom:0px;}
.picbox .pic1{ left:0px;}
.picbox .pic2{ left:95px;}
.picbox .pic3{ left:190px; width:280px; height:350px; opacity:1;}
.picbox .pic4{ left:472px;}
.picbox .pic5{ left:567px;}

如图，我也试过了padding-buttom：0px;等等方法，不知道是不是盒子模型出问题了？
请个大神不吝赐教，自学路上倍艰辛啊！

Answer 1

1、打开Dreamweaver工具，并新建html页面。

2、切换到编写代码的界面。

3、编写代码如下：<div><img src="images/1.jpg" width="20px" height="20px">我是文字</div>  。

4、预览页面如下图，我们可以看到图片和文字并没有对齐，那么我们在img标签中添加样式。

5、代码如下：style=" vertical-align: bottom;"即可。

Answer 2

1、首先通过vertical-align:middle实现现图片与文字水平对齐，需要区分html是行内元素，还是块状元素，实现img、p及div水平居中对齐，则只需要在img的css中的vertical-align：middle；及将p和div（display：inline-block）转化为行内元素。

2、实现img、span水平居中对齐，由于这两者都是行内元素。

3、则只需要在img的css中的vertical-align：middle；span标签什么都不需要添加。

4、通过flex布局实现图片与文字水平对齐，只需要在父级元素中css添加。

5、子级元素则不需要像上面那样添加vertical-align：middle，这样就可以了。

Answer 3

img元素不要用定位属性，否则都会向左上对齐；
如果要定位IMG，就把IMG装进一个DIV，在DIV里面加white-space:nowrap;和position:relative;top:100%;，然后把这个DIV再装进一个1px高度的父DIV，这样就可以看着是底部对齐了；

如果上面方法不满意，就直接用TABLE元素装吧，这个对页面的垂直布局的控制很方便

Answer 4

控制css实现图片底部对齐有多种方法

<div class="picbox">
    <img src="1" alt="img1" >   
    <img src="2" alt="img2" >   
    <img src="3" alt="img3" >
</div>

1. 使用vertical-align属性

   <style>
   

   .picbox img{vertical-align:bottom}

   </style>

2. 使用position定位

   <style>

   .picbox{position:relative}

   .picbox img{position:absolute;bottom:0}

   </style>

   
   

Answer 5

依据你提供的代码，我改成如下形式：

css：
.picbox{ width:660px; height:350px; position:relative; padding-top:200px; transition:1s; margin:0 auto;}
.picbox img{ position:absolute; width:93px; height:117px; opacity:0.5; padding-bottom:0px;}
.picbox .pic1,.picbox .pic2,.picbox .pic3,.picbox .pic4,.picbox .pic5{bottom:0}
.picbox .pic1{ left:0px;}
.picbox .pic2{ left:95px;}
.picbox .pic3{ left:190px; width:280px; height:350px; opacity:1;}
.picbox .pic4{ left:472px;}
.picbox .pic5{ left:567px;}

希望能帮到你