`
chris.ma
  • 浏览: 2380 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

多图大小不一垂直居中

    博客分类:
  • CSS
阅读更多
Method 1: Insert a transparent GIF image, which width and height are fixed.

CSS file
---------
.inner{
	float: left;
}
img{
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
}


HTML file
----------
<div>
  <div class="inner">
    <img src="thumbnail.gif" style="background-image:url(1.png);" />
  </div>
  <div class="inner">
    <img src="thumbnail.gif" style="background-image:url(2.png);" />
  </div>
</div>


Method 2: Insert a transparent GIF file, which width is 1 px.

CSS file
----------
.inner{
	float:left; 
	border:1px solid #beceeb; 
	text-align:center; 
}
.gif{
	height:100%; 
	width:1px; 
	vertical-align:middle;
}
.show{
	vertical-align:middle;
}


HTML file
----------
<div>
  <div class="inner">
    <img class="show" src="1.png" />
    <img class="gif" src="1px.gif" alt="">
  </div>
  <div class="inner">
    <img class="show" src="2.png" />
    <img class="gif" src="1px.gif" alt="">
  </div>
</div>
分享到:
评论

相关推荐

    js按比例缩放图片且垂直居中显示图片

    在网页设计中,图片的展示方式至关重要,尤其是当图片大小不一、需要适应不同设备时。"js按比例缩放图片且垂直居中显示图片"这个主题涉及到的是使用JavaScript技术来处理图片的尺寸调整和布局定位,使得图片无论在何...

    大小不固定的图片、多行文字的水平垂直居中实现方法

    想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。关于图片垂直居中显示,想必很...

    CSS图片响应式 垂直水平居中

    4.图片始终保持水平垂直居中。 5.图片的行列数不变,这里一直都是3*3. 下面来搞定一个个要求。 满足要求1意味着这里要尽量不使用高级浏览器才有的属性,比如高级浏览器居中常用的什么 display:table-cell;vertical-...

    垂直方向的ViewPager

    【垂直方向的ViewPager】是一种对Android原生ViewPager组件进行扩展的实现,允许用户在垂直方向上滑动页面,而非传统的水平滑动。这种组件在设计上打破了常规,为应用程序提供了更多的交互可能性,尤其是在创建上下...

    duilib库Container布局demo

    4. **流式布局(Flow Layout)**:根据容器大小动态调整控件的排列方式,当容器尺寸改变时,控件会像水流一样自动调整位置。 5. **绝对布局(Absolute Layout)**:每个控件都有自己的坐标位置,不依赖于其他控件或容器...

    Android-自动换行布局水平排列子项并自动换行支持不等长不等宽子项且可以设置垂直间距与水平间距及子项对齐模式。

    这种布局特别适合于展示多个大小不一的元素,如图片、按钮或者自定义视图,同时提供了定制间距和对齐方式的能力,以提升UI的可读性和美观度。 1. 自动换行:这种布局的核心功能就是自动换行。当一行无法容纳所有子...

    自己整合自适应屏幕的banner

    在描述中提到,“图片可以全屏居中显示,可以解决图片在不同分辨率的屏幕显示不一样问题”,这表明设计的核心是确保图片在任何分辨率下都能保持全屏且居中,避免因屏幕大小差异导致图片变形或显示不完整。...

    artDialog非常漂亮的弹窗JS库

    小对话框自动采用黄金比例垂直居中;超过指定面积大小的对话框拖动自动采用替身挪动;自动计算边界防止超出可操作范围;…… 跨浏览器兼容 兼容:IE6+、Firefox、Chrome、Safari、Opera,浏览器版本越高体验越好。...

    python画柱状图--不同颜色并显示数值的方法

    - `ha='center', va= 'bottom'`: 分别表示水平和垂直对齐方式,这里设置为居中和底部对齐。 - `fontsize=11`: 设置文本的字体大小。 最后,我们通过`plt.ylim(0,37)`设定Y轴的显示范围,以确保所有的柱子都在可视...

    div+css 兼容性总结

    - 垂直居中设置有时不起作用,通过将行高设置为与高度相同,可以实现垂直居中。 11. **高度自适应问题** - 当一个自适应高度的`div`后面跟随另一个`div`时,Firefox可能出现定位问题。解决方法是为下面的`div`...

    css常见问题解决办法

    9. **input在div中垂直居中**:在CSS布局中,元素的垂直居中有时是个挑战。这个示例可能演示了使用Flexbox、Grid或传统的CSS定位方法(如`position: absolute`和`transform: translateY()`)来实现输入框的垂直居中...

    使用office操作Exelc

    3. 对齐方式:选择单元格,点击对齐按钮(左对齐、居中、右对齐、顶部对齐、垂直居中、底部对齐)进行调整。 四、公式与函数 1. 公式输入:在单元格中输入等号(=)开始创建公式,例如=A1+B1表示计算A1和B1的和。 2...

    适配移动端的HTML5.rar_适配移动端的HTML5

    通过设置`display: flex`,可以轻松实现水平或垂直居中,以及灵活的元素间距: ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 四、...

    Java Swing 布局

    卡片布局允许在一个容器中切换不同的组件,就像多张卡片一样。每个组件对应一个“卡片”,只有一个卡片可见。使用`show()`方法切换卡片。 5. 网格袋布局(GridBagLayout) 网格袋布局是最灵活的布局管理器,允许...

    GridLayout应用

    然而,当需要更复杂的布局时,如组件大小不一、跨越多格或者部分重叠,GridLayout就显得不够灵活,这时GridBagLayout就派上了用场。 **GridBagLayout详解** GridBagLayout是Java中最灵活的布局管理器,它可以处理...

    Java程序设计第十一章图形用户界面.ppt

    默认情况下,组件居中对齐,水平和垂直间隙可自定义。 2. BorderLayout:边界布局,将容器分为五个区域:东、南、西、北和中心,每个区域最多放置一个组件。 3. GridLayout:网格布局,将容器划分为固定数量的行和...

    帧布局_霓虹灯

    它可以是"top"、"bottom"、"left"、"right"、"center"等,或者它们的组合,如"center_vertical"(垂直居中)、"center_horizontal"(水平居中)以及"center"(两者同时居中)。 2. `android:layout_margin`:此属性...

    Java软件设计基础:高级GUI设计与多媒体技术

    布局管理器负责组织和定位组件,使得它们在不同大小的屏幕上都能适当地显示。Java提供了多种布局管理器来实现这一目标,包括: 1. **FlowLayout**:这是最简单的布局管理器,按照组件添加的顺序从左到右、从上到下...

    AutoCAD 2008中文版自学实例视频教程下载第6章 文字、表格与注释.zip

    3. 文本对齐:为了确保文本在图纸中的正确布局,AutoCAD提供了多种对齐方式,如左对齐、右对齐、居中和垂直居中等。 4. 文字镜像:在设计中,有时需要将文字镜像以保持其可读性。AutoCAD提供文字镜像功能,可以保持...

    Android应用源码之Android9妹工具(9Patch).zip

    水平和垂直方向各两行,总共四条线,表示图像的四个方向如何响应大小变化。 2. **9-Patch工具**: - Android Studio内置了一个9-Patch工具,名为Draw9Patch,用于创建和编辑9-Patch图像。开发者可以使用这个工具来...

Global site tag (gtag.js) - Google Analytics