`

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特性来创建艺术文字。通过查看和学习这些代码,你可以了解到实际应用中的技巧和注意事项,例如如何...

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

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

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

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

    Arctext弧形文字效果插件(CSS3&amp;jQuery)

    在本案例中,Arctext插件利用CSS3的transform属性来实现文字的变形,尤其是旋转和平移,使得文字能够沿着预设的弧线路径排列。同时,通过CSS3的animation属性,可以控制文字动画的播放速度、方向和次数,创造出流畅...

    纯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属性创建一个独特的悬停图片特效,该特效包括图片模糊、放大、遮罩以及显示文字的动画。这个特效适用于图文卡片布局,能够为用户交互提供生动有趣的视觉体验。 ...

    CSS3 SVG文字背景动画.zip

    例如,我们可以让背景的SVG形状在颜色、大小或位置上发生变化,以创造出引人注目的视觉体验。 此外,这个特效还强调了交互性。用户可以选择文字,这意味着在背景动画播放的同时,文本仍然是可交互的,这得益于HTML5...

    HTML5CSS3图片描述效果 文字描述浮动在图片上.rar.rar

    在这个“HTML5CSS3图片描述效果 文字描述浮动在图片上”的项目中,我们将探讨如何利用这两者来实现一种常见的网页设计模式:在图片上添加文字描述,且这些描述可以浮动在图片的不同位置。 首先,HTML5提供了新的...

    纯css3鼠标滑过图片文字旋转动画特效

    【纯CSS3鼠标滑过图片文字旋转动画特效】是一种利用CSS3的新特性来实现的交互效果,它在用户将鼠标指针悬停在图片上时,可以触发文字的旋转动画,提升网页的视觉吸引力和用户体验。这个特效的核心在于对CSS3选择器、...

    css3悬停图片滑动遮罩层文字提示特效

    在本案例中,我们讨论的是一个利用CSS3实现的“悬停图片滑动遮罩层文字提示特效”。 这个特效通常应用于图片展示区域,当鼠标悬停在图片上时,会出现一个半透明的遮罩层,并在该层上滑动显示相关的文字提示信息。...

Global site tag (gtag.js) - Google Analytics