网页html 图片横向摆放,css实现多张图片横向居中显示的方法

先讲一下实现的步骤：

最终效果

2. 代码实现

HTML部分

分类小贴士

CSS部分

.main{

width:100%;

margin-top:40px;

}

.main .tag{

margin:0 auto;

width:200px;

font-size:18px;

border-bottom:1px solid #878787;

text-align:center;

margin-bottom:20px;

}

.main .images{

margin:0 auto;

width:1300px;//设置

块的大小，要实现居中效果需要经过计算

}

.main .images .mid{

float: left;//设置左对齐

margin:5px;//图片边缘间隔

}

.main .images .mid img{

width:250px;//规范图片长宽

height:300px;

}

要想显示 div 块里面的多张图片居中显示是要经过计算的，我一共使用了5张图片，每张都是宽是 250px，高是 300px，再加上每张图片的边缘间隔为 5px，那么

div 块的宽度应该是 5 乘以 250(px：五张图片宽度) 再加上 10 乘以 5(px：四个间隔乘以二和首和尾一共十个边缘)，结果是 1300px

思路：大 div 块包含小 div 块，用小 div 块来装图片，根据图片大小计算大 div 块的宽度，从而实现多张图片居中显示。

总结

到此这篇关于css实现多张图片横向居中显示的方法的文章就介绍到这了,更多相关css 图片横向居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

网页html 图片横向摆放,css实现多张图片横向居中显示的方法相关推荐

NPOI随笔——图片在单元格等比缩放且居中显示
NPOI导出的图片默认是在单元格左上方,这使得图片在单元格显示得很难看.居中,且等比缩放,才是图片在单元格上的完美展示. /// <summary>/// 图片在单元格等比缩放居中显示// ...
css用网络图片做背景图片,css 网页背景图片怎样用CSS实现大背景网页效果
在网页设计制作中经常会遇到这样的问题:用图片做背景时,由于显示器分辨率太大或者图片尺寸太小,在页面的两边或者下部了没有背景图片.例如:在小于1024*768分辨率时,是没有问题的.但是假如你的显示器的 ...
css怎样让背景图片居中,CSS让背景图片居中显示的方法
当我们的背景图片写成: background: url("images/titleborder.png") no-repeat; 时,表示背景图片不重复,位置会默认为在div中居于 ...
html网页表头下拉,html css将表头固定的最直接的方法
position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路.但是与此同时必须解决两个问题.第一:表体将随之 ...
ASP网页FLASH图片播放只能在老版Internet Explorer 正常显示，最新主流浏览器都不支持，哪位大伽有好的代码改动妙招烦请赐教，谢谢
原来ASP网站源码如下: <table width="100%" border="0" align="center" cellpadd ...
【CSS3】CSS实现の全屏覆盖+居中显示+等比缩放
图片全屏覆盖我们可能希望实现图片的全屏覆盖,这种覆盖是随着网页大小而调整的,而不是固定的,怎么做呢? 请看以下CSS代码: body{background:url("img.jpg&quo ...
css如何让背景上下居中显示,CSS有哪些方式可以实现垂直居中？
大家好,我是IT修真院郑州分院第四期的学员汪开放,一枚正直纯洁善良的web程序员今天给大家分享一下,CSS有哪些方式可以实现垂直居中? 1.背景介绍 44年前我们把人送上月球,但在CSS中我们仍然不 ...
html中div设置图片居中显示,图片在DIV中居中显示的方法
问:如何让图片在DIV中水平和垂直两个方向都居中?(注意这里的图片非用作背景) 关于该问题的解决方法如下: 方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的 ...
CSS实现div的嵌套居中显示的多种方式
1.通过flex方式实现:将父盒子的position属性设置为relative,并且display设置为flex,最后设置水平居中和垂直居中.这样设置后,子盒子不需要设置什么,就会实现居中.哪个盒子需 ...

网页html 图片横向摆放,css实现多张图片横向居中显示的方法

网页html 图片横向摆放,css实现多张图片横向居中显示的方法相关推荐

最新文章

热门文章