怎样用css实现多张图片上下左右对齐

html-css020

怎样用css实现多张图片上下左右对齐,第1张

<img src = '../image/1.jpg'><br>

<img src = '../image/2.jpg'><br>

<img src = '../image/3.jpg'><br>

<img src = '../image/4.jpg'><br>

最基本的对齐方式：

img{

width:100px

height:100px

}

在CSS中，我们可以使用各种方法和技术来使对齐项目，例可以水平和垂直对齐项目。下面本篇文章就来给大家介绍一些使用CSS对齐项目的方法，希望对大家有所帮助。

1、margin : auto

此属性用于将块元素水平对齐到中心。

示例：

注意：使用margin : auto在IE8中不起作用，除非声明了!DOCTYPE。

效果图：

2、position: absolute

我们可以使用position: absolute来对齐项目。

示例：

效果图：

3、text-align: center

我们可以在各种标签中使用text-align: center；它可以将任何用HTML编写的文本对齐。

示例：

效果图：

4、line-height属性

想要垂直对齐项目，我们可以使用line-height属性。line-height 属性设置行间的距离（行高）。

示例：

效果图：

5、padding和text-align属性

我们可以使用padding属性和text-align : center的组合来垂直和水平对齐文本。

示例：

效果图：

本文参考地址： https://www.html.cn/qa/css3/10403.html

上下居中··这个肯定就要用js算出来了···靠右对齐有很多种方法··position: fixedright: 0这样就靠右并且随滚动条滚动·一直固定在位置上···如果你是要做那种右下角的小窗口···纯css是不能解决问题的·