`
joe.feng
  • 浏览: 134352 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

CSS让同一行的图片和文字垂直居中对齐(转载)

    博客分类:
  • Java
阅读更多

有些朋友会发现,如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于垂直居中呢,很简单,就是在图片和文字所在的行中添加CSS属性:vertical-align:middle;这样,它们在同一行就会垂直居中对齐了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>让同一行内的图片和文字垂直居中对齐</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style>
 body{
   font-size:9pt;
 }
 #buttons *{
	vertical-align:middle;
 }
/*如果上边的不兼容火狐等,可以把下面这句也加上!
#buttons *{
	vertical-align:middle;
 }
*/
 </style>
</head>
<body>

<div id="buttons">
    <img src="/jscss/demoimg/200902/reg.gif">
    <img src="/jscss/demoimg/200902/login.gif">
    <a href="#">找回密码</a>
</div><br>
上边的图片、文字是不是都垂直对齐了呢?
</body>
</html>
 
分享到:
评论

相关推荐

    CSS实现同一行的图片和文字垂直居中对齐的方法

    总结以上内容,实现同一行的图片和文字垂直居中对齐的方法,关键在于正确使用 vertical-align: middle; 属性,并确保元素的 display 属性为 inline-block 或 table-cell。这一技巧在现代网页设计和开发中具有较高的...

    css图片垂直居中方法

    在网页设计中,让图片垂直居中是一项常见的需求,它能确保页面布局的美观与均衡。CSS(Cascading Style Sheets)提供了多种方法来实现这一效果。以下将详细阐述几种常用的CSS图片垂直居中的技术。 1. **Flexbox布局...

    懒人原生纯css实现多行文字均保持垂直居中效果

    在实际网页中,如何实现如何实现父容器高度固定,文字可能一行,两行或更多行的垂直居中对齐呢? 实现的关键是把文字当图片处理。 用一个span标签将所有的文字封装起来,设置文字与图片相同的display属性...

    div中多行文字垂直居中

    在网页设计中,让多行文字在`div`元素中垂直居中是一项常见的需求,尤其在构建响应式布局和用户界面时。实现这个效果的方法多种多样,每种方法都有其适用场景和优缺点。以下是一些主要的策略来实现`div`中多行文字的...

    CSS解决文字与图片不能水平居中对齐的问题

    为了解决这个问题,可以通过调整CSS中的`vertical-align`属性来实现文字和图片的水平居中对齐。 首先,我们需要理解`vertical-align`属性的作用。在HTML中,`vertical-align`属性可以用来调整行内元素(如图片)或...

    css左右居中对齐

    "css左右居中对齐"是一个常见的需求,尤其是在构建响应式网站或设计用户界面时。本文将深入探讨如何使用CSS实现元素的水平居中对齐,并结合`test.html`文件中的示例进行说明。 首先,我们要理解CSS中的几种主要布局...

    jquery.valign插件实现图片,文字上下左右垂直居中

    今天特意在网上找到了一款插件--jquery.valign,可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果,使用方法: 1、调用jquery库以及本插件 2、jquery方法调用,如本案例第22、23行 使用说明:  外侧...

    图片与文字同排垂直居中的CSS样式

    本文将详细讲解如何使用CSS样式来实现图片与文字同排垂直居中,这对于网页设计和前端开发人员来说是一项必备技能。 首先,我们要理解CSS中的垂直居中方法。对于单独的文字垂直居中,最常用的方法是通过设置`line-...

    div+css有实例,易学易懂

    - **修饰图片的水平和垂直居中**:通过`display`和`align-items`等属性。 #### 字体的综合属性 - **字体的选择**:通过`font-family`属性。 - **字体的大小**:使用`font-size`属性。 - **字体的加粗**:通过`font...

    CSS实现让同一行文字和输入框对齐的方法

    通过比较这两行代码的显示结果,我们可以明显看到设置了`vertical-align`属性的输入框和文本能够实现垂直居中对齐。 具体的CSS代码如下: ```css #a input { width: 200px; height: 30px; border: 1px solid red...

    CSS控制图片和文字在同一行显示且对齐的3种方法

    本文将详细介绍三种CSS方法来解决这个问题,确保图片和文字在同一行对齐。 1. **使用`vertical-align: middle`属性** 这种方法适用于图片和文字都在同一个元素(如`&lt;div&gt;`)中的情况。通过设置`vertical-align: ...

    同一行的图片和文字巧妙的居中对齐的解决方法

    而本文将详细介绍的是一种通过特定CSS样式的设置,使得图片与文字能够实现垂直居中对齐的方法。 首先,我们要了解的是一些基础概念。在HTML中,一个段落元素可以包含图片和文字,而它们默认是按照基线(baseline)...

    css中使input输入框与img(图片)在同一行居中对齐

    在CSS布局中,将不同的元素如input输入框与img图片...总之,通过设置`vertical-align: middle`并可能结合调整其他CSS属性,可以有效地实现input输入框与img图片在同一行的居中对齐,从而提高页面的视觉效果和用户体验。

    DIV 上下居中 多行 省略号

    总结来说,实现`&lt;div&gt;`内多行文字垂直居中并添加省略号功能,主要涉及CSS的布局、文本对齐和溢出隐藏技术。通过`display: flex`或`display: grid`实现上下居中,结合`line-clamp`、`-webkit-line-clamp`以及`...

    div的内容图片垂直居中代码(兼容多浏览器).rar

    在网页设计中,让图片或其他内容在div容器中垂直居中是一个常见的需求,尤其是在多浏览器兼容性方面。这里我们将深入探讨如何实现这个功能,并结合JavaScript(JS)特效和CSS样式来达成目标。首先,让我们先了解一些...

    垂直居中ie8+

    在网页设计中,"垂直居中ie8+"是一个常见的需求,指的是在Internet Explorer 8及更高版本的浏览器中实现元素的垂直居中对齐。在IE8+支持CSS的多种方法,使得开发者能够灵活地处理不同场景下的垂直居中问题。下面我们...

    实现css文字垂直居中的8种方法

    在CSS布局中,实现文字垂直居中是一项常见的需求。标题提到的"实现css文字垂直居中的8种方法"涵盖了多种不同的技术,适用于不同场景。以下是对这些方法的详细解释: 1. **绝对定位和负外边距**: 这种方法适用于...

    实现DIV层内的文字垂直居中(单行文字/多行文字)

    行高(line-height)指的是在同一行文字中,文字基线到下一行文字基线之间的距离,是决定文字垂直居中的关键属性。当DIV的高度与line-height相等时,文字就会在DIV中垂直居中显示。这一方法的代码示例如下: ```css...

    DIV和SPAN垂直居中对齐的实现方法

    在给定的文件中,提到了DIV和SPAN这两个HTML元素的垂直居中对齐的实现方法。 首先,我们先了解DIV和SPAN这两个标签在HTML中的作用。DIV是一个块级元素,用于定义文档中的分区或节。而SPAN则是行内元素,用于对文档...

Global site tag (gtag.js) - Google Analytics