`
qq351943923
  • 浏览: 9797 次
社区版块
存档分类
最新评论

html 同行元素并排等高显示

    博客分类:
  • html
 
阅读更多

详情在下面这个页面看

http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp

我自己用的是下面

vertical-align:middle

 

以下是直接复制网站的内容

实例

垂直对齐一幅图像:

img
  {
  vertical-align:text-top;
  }

亲自试一试

浏览器支持

所有浏览器都支持 vertical-align 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

定义和用法

vertical-align 属性设置元素的垂直对齐方式。

说明

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

默认值: 继承性: 版本: JavaScript 语法:
baseline
no
CSS1
object.style.verticalAlign="bottom"

可能的值

值 描述
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length  
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
分享到:
评论

相关推荐

    行元素并排

    一、使用css float并排显示 二、使用css display同行显示 我们加入display:inline即可解决实现同行并排显示div盒子对象。对同行所有div标签设置div{ display:inline}样式

    Android加载HTML图文并排

    本示例“Android加载HTML图文并排”提供了一种解决方案,它允许开发者将HTML内容与图片并列显示在TextView中,为用户提供更加丰富的视觉体验。下面我们将详细讲解如何实现这一功能。 首先,我们需要理解Android中的...

    div多列等高处理,实现多个div等高

    在网页设计中,让多个div元素在同一行内保持等高是一项常见的需求,这可以使得页面布局更加美观且统一。在本篇文章中,我们将深入探讨如何使用div实现多列等高处理,以及相关的关键技术和方法。 首先,让我们了解...

    jquery 实现左右等高

    1. **HTML 结构**:创建基本的 HTML 结构,通常包括两个或多个并排放置的 div 元素,分别代表左侧和右侧的区域。例如: ```html <div class="left"></div> <div class="right"></div> ``` 2. **CSS 基础...

    行内元素和块级元素 displayDemo.html

    - 相邻的行内元素可以并排显示,直到一行放不下才会换行。 - 不能设置宽高(width/height),但可以设置边距(margin)和内边距(padding),不过这些属性的效果有限。 2. 块级元素(Block-level Elements) 块级...

    CAD窗口并排显示

    "CAD窗口并排显示"的功能就是解决这一需求的方法,它使得用户可以在同一屏幕空间内有效地排列和管理多个CAD文档。在AutoCAD 2006版本中,虽然没有内置直接的并排显示选项,但可以通过一些小技巧或者安装第三方插件来...

    图片展示等高DEMO

    使用媒体查询(`media queries`)可以根据设备屏幕尺寸调整图片的尺寸和布局,以保持等高的同时,保证在不同设备上的良好显示。 在百度图片中,这种等高展示技术被广泛应用于图片搜索结果的呈现。每个图片预览卡片...

    简单的图文并排效果

    在HTML中,我们可以使用`<div>`元素作为容器,来包裹图像和文本,然后通过CSS控制它们的显示方式。 在`1111111.html`文件中,你可能会看到以下基础结构: ```html <!DOCTYPE html> <html lang="zh"> , initial...

    两个div并排的实现代码

    总结来说,通过设置`div`元素的`float`属性、宽度和边距,我们可以实现两个`div`并排显示。如果需要进一步控制布局,如居中对齐,可以添加外部容器并调整其样式。对于初学者来说,理解并掌握这些基本的CSS布局技巧...

    替换元素与非替换元素

    **行内元素**则更为灵活,它们可以与其他行内元素并排显示,不会强制新行开始。比如,`<a>`标签用于创建超链接,就是一个典型的行内元素。通过设置`display`属性为`inline`,可以使元素转变为行内表现。 值得注意的...

    标题|菜单同行显示

    在网页设计中,"标题|菜单同行显示"是一种常见的布局需求,它能让页面看起来更加紧凑且高效。在HTML和CSS中,有多种方法可以实现这种效果。以下将详细讲解这两种技术。 首先,我们可以使用HTML的`<div>`元素来创建...

    HTML5&CSS3网页制作:元素的转换.pptx

    元素的转换主要指的是通过CSS的`display`属性改变HTML元素的布局模式,这直接影响到元素在网页中的表现形式。`display`属性允许我们设置以下几种主要的值: 1. `inline`:将元素设置为行内元素,如`<span>`或`<a>`...

    并排多个listView

    在Android中,通常我们会在一个Activity或Fragment中设置单个ListView,但如果需要并排显示多个,就需要创建一个自定义布局。可以使用LinearLayout或RelativeLayout作为父容器,然后在XML布局文件中添加多个...

    让两个Div并排显示的多种方法

    上述代码中,两个div元素会显示在同一行内,但是这种并排效果并不是严格意义上的并排布局,因为它不提供行内元素之间的空间控制,通常还需要额外的样式处理。 二、通过设置float来让Div并排显示 浮动(float)是一...

    as3.0富文本,可以插入表情图片,图文并排

    这里的关键在于正确地组合和嵌套HTML元素,同时合理设置样式,以实现所需的布局效果。为了确保代码的可维护性和可扩展性,建议将HTML字符串的构建和样式设置封装到一个专门的方法中。 在实际项目中,你可能还需要...

    CSS实现图文并排的布局实例

    在网页设计中,图文并排的布局是一种常见的需求,它可以使页面内容更加生动且易于阅读。本实例将探讨如何利用CSS来实现这种布局。我们将主要关注两种常见的布局方式:浮动布局(Float)和Flexbox布局。 ### 1. 浮动...

    CSS让子容器超出父元素(子容器悬浮在父容器效果)

    前言 有时候,我们需要如下图这样一个悬浮效果需求: 实现 在标准的正常的情况下,只能使用 绝对定位 来完成。 第一步:父容器定位设置为 relative(相对.../*父元素>相对定位*/ } #b{ width: 150px; height:50px;

    并排LiseView(类似商城分类列表)

    并排ListView,通常被称为横向ListView或者GridView,是一种在Android开发中常见的布局方式,它与传统的垂直滚动的ListView不同,能够实现水平方向上的滑动展示,常用于商品分类、菜单栏等场景,类似于商场中的分类...

    HTML5&CSS3网页制作:元素的类型.pptx

    - 示例:`<img>`元素可以设置宽度和高度,并与其他内联元素并排显示。 理解这些元素类型对于创建响应式和动态布局至关重要。在CSS3中,可以通过display属性改变元素的默认类型,例如将一个块状元素变为内联元素(`...

    jquery图文并排左右切换特效

    开发者可以设定每个图文块的显示时间和淡入淡出的速度,以调整动画的节奏和感觉。 在实现这些特效时,开发者需要创建HTML结构来容纳图文内容,并通过CSS进行基本布局。对于图文并排,通常会使用浮动布局、Flexbox...

Global site tag (gtag.js) - Google Analytics