`

css之让文字排在图片的右边的中心位置

 
阅读更多
<dl>  
            <dt>领导、老师</dt>  
  
            <dd><img src="images/tx1.jpg" width="100" height="100" /><a href="#">zzzzzzzzzzzzz</a></dd>  
            <dd><img src="images/tx2.jpg" width="100" height="100" /><a href="#">zzzzzzzzzzz</a></dd>  
            <dd><img src="images/tx3.jpg" width="100" height="100" /><a href="#">zzzzzzzzzzz</a></dd>  
            <dd><img src="images/tx4.jpg" width="100" height="100" /><a href="#">zzzzzzzzzzz</a></dd>  
            <dd><img src="images/tx5.jpg" width="100" height="100" /><a href="#">zzzzzzzzzzz</a></dd>  
</dl>  

 

dl dd{  
    margin-top:10px;  
    height:100px;  
    border:1px solid  #F00; /*颜色*/  
}  
dl dd img{  
    float:left;  
    border:1px solid  #F00; /*颜色*/  
}  
dl dd a{  
    line-height:100px;     /*注意这行代码,惹是不写,得不到想要的结果哦*/  
    vertical-align:middle;  
    border:1px solid  #F00; /*颜色*/  
    text-align:left;  
}  

 

 

  • 大小: 88.1 KB
分享到:
评论

相关推荐

    CSS图片和文字排版教程

    CSS图片和文字排版教程 本教程旨在帮助初学阶段的学员掌握CSS图片和文字排版的知识,通过详细讲解各种图像与文字的混合排版方式,帮助学员快速掌握CSS图片和文字排版的技能。 1. CSS文字样式设置 CSS提供了多种...

    css3文字特效_css3火焰文字_css3文字渐变代码

    在现代网页设计中,CSS3(层叠样式表第三版)已经成为了不可或缺的一部分,它带来了丰富的视觉效果,其中就包括各种炫酷的文字特效。本文将深入探讨“CSS3文字特效”,特别是“CSS3火焰文字”以及“CSS3文字渐变代码...

    CSS3实现的十五种图片经过文字显示特效源码下载

    在本文中,我们将深入探讨如何使用CSS3来实现十五种不同的图片经过文字显示的特效。CSS3是 Cascading Style Sheets 的第三版,它为网页设计带来了丰富的视觉效果和动画功能,使得网页元素的呈现方式更加多样化。以下...

    html+js+css图片轮播图下方配文字可变图片可点击.rar

    在"图片轮播图下方配文字可变"这一特性中,JavaScript需要与CSS配合,确保当图片切换时,对应的描述文字也随之更新。这通常通过预先定义好每张图片对应的文字内容,然后在图片切换时,根据当前图片的索引来选择显示...

    css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局

     原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形。  二、使用布局技术  使用CSS3 圆角技术实现。  使用CSS3样式单词:border-radius  语法:  div{border-radius:5px}  对图片设置...

    初学-html中如何让图片放左边,文字紧邻着放右边

    首先,要实现图片在左,文字在右的效果,可以使用CSS的`float`属性。`float`属性允许元素浮动到其容器的左侧或右侧。下面是一个简单的例子: ```html &lt;!DOCTYPE html&gt; img { float: left; /* 图片向左浮动 ...

    js+css带文字图片可点击轮播图.rar

    在创建轮播图时,CSS可以用于设定图片容器的尺寸、位置、过渡效果等。例如,使用`position`属性定位轮播图中的各个元素,使用`transform`和`transition`实现平滑的图片切换动画,以及设置背景色、边框等增强视觉效果...

    纯css3艺术文字样式效果代码

    在压缩包中的`texiao3410_1560680953`文件中,可能包含了一些示例代码,这些代码可能展示了如何组合使用上述CSS3特性来创建艺术文字。通过查看和学习这些代码,你可以了解到实际应用中的技巧和注意事项,例如如何...

    jquery css3图片文字介绍鼠标滚动页面动画单页

    【标题】"jQuery CSS3图片文字介绍鼠标滚动页面动画单页"主要涉及到的是网页动态效果的实现技术,其中核心是jQuery库和CSS3这两个关键工具。这篇文章或教程可能旨在教授如何利用这两种技术来创建一个富有视觉吸引力...

    CSS3的鼠标悬停图片显示文字动画特效.zip

    本资源“CSS3的鼠标悬停图片显示文字动画特效”正是一种利用CSS3特性实现的创新交互设计,当用户将鼠标悬停在图片上时,标题文字会以动态的方式滑动显示出来,增加了用户体验的趣味性和吸引力。 这个特效的核心在于...

    文字环绕图片的css布局效果

    文字环绕图片的css布局效果,实现图片右上角显示,文字在其左侧,高度超出图片的部分宽度恢复为100%宽,实现环绕效果的小demo。

    css3悬停图片3D翻转动画显示文字代码

    通常,图片和文字会被放置在一个相对定位的容器内,然后通过绝对定位来设置它们的位置。当图片翻转时,文字将会显示出来。 ```css .image-container { position: relative; } .image { position: absolute; top...

    jQuery css3鼠标悬停图片切换文字过渡动画特效.zip

    在本项目中,"jQuery css3鼠标悬停图片切换文字过渡动画特效.zip"是一个集合了7种不同风格的JavaScript和CSS3技术实现的交互式图片文字切换效果。这些效果为网页设计提供了丰富的动态视觉体验,使得用户在鼠标悬停在...

    css3 文字效果

    总之,CSS3的出现为网页设计提供了无限可能性,尤其是对于文字效果的处理,让开发者可以创造出极具创意和个性化的网页界面。无论是简单的阴影、渐变,还是复杂的描边和填充模式,都能通过CSS3轻松实现。对于前端开发...

    css3悬停图片标题文字显示动画特效

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了丰富的视觉效果和交互体验,其中之一就是悬停图片标题文字显示动画特效。这种特效通常用于增加网站的互动性和吸引力,使用户在鼠标悬停在图片上时,标题文字以...

    纯CSS3鼠标滑过图片文字动画特效

    "纯CSS3鼠标滑过图片文字动画特效"是一种通过CSS3技术实现的交互式设计,它允许用户在鼠标悬停于图片上时,触发文字的动态展示或变化,从而为网页增添视觉吸引力。 【描述】:“纯CSS3鼠标滑过图片文字动画特效”...

    jQuery css3旅游网鼠标悬停图片文字动画效果

    "jQuery css3旅游网鼠标悬停图片文字动画效果"是一种常见的交互式设计,它结合了jQuery JavaScript库和CSS3的强大功能,为旅游网站的图片展示带来生动的视觉体验。这种效果在用户将鼠标光标悬停在图片上时,会触发一...

    css3火焰文字特效

    【CSS3火焰文字特效】是一种基于CSS3技术的创新视觉表现手法,用于在网页上创造出动态、逼真的火焰燃烧效果的文字。这种特效以其简洁的代码实现和炫酷的视觉冲击力,深受前端开发者喜爱。在现代网页设计中,CSS3不仅...

    CSS3 Animation文字动画特效.zip

    在IT领域,CSS3 Animation是一种强大的技术,用于创建动态、交互式的网页元素,尤其是文字动画特效。本资源“CSS3 Animation文字动画特效.zip”提供了一系列精心设计的文字动画,旨在为网页增加视觉吸引力,提升用户...

    css3悬停图片模糊放大遮罩显示文字动画特效

    在本文中,我们将深入探讨如何使用CSS3的Clip-path属性创建一个独特的悬停图片特效,该特效包括图片模糊、放大、遮罩以及显示文字的动画。这个特效适用于图文卡片布局,能够为用户交互提供生动有趣的视觉体验。 ...

Global site tag (gtag.js) - Google Analytics