【技术】文字和图片垂直居中

注:

代码:所有的宽度都应该写%或em,不应该用px。

效果如下图:

代码如下:

<div class="nav_bg">
  <a class="goback" href="##"><img src="images/goback.jpg" ></a>
     <div class="site_guide">建站指导</div>

</div>

.nav_bg{
    width: 100%;
    height: 70px;
    background: url(‘images/ico2.png‘) no-repeat 7em center #e60012;
}
.nav_bg .goback{
    display: block;

/*将goback.jpg内容display: block;否则出现问题:文字部分“建站指导”的位置不受控,不能调整*/

width: 70px;
    height: 70px;
    float: left;
}
.site_guide{
    float:left;
    font-size:2em;
    line-height:70px;
    padding-left: 2.5em;
}

                   

goback.jpg               ico2.png

时间: 2024-10-20 10:07:46

【技术】文字和图片垂直居中的相关文章

html 文字图片垂直居中

方法一 :设置盒子高度与line-height相同,本方法适用于一行文字. 图片垂直居中 和一行文字对齐 用属性vertical-align 小图标和文字垂直对齐,小图标作为背景插入 // attr:设置自己生成的属性,像selected checked这类即使用鼠标点过 他的值是undefinded,所以自有属性推荐用prop 包含块(Containing Block)某个元素的尺寸和位置的计算往往是由该元素所在的包含块决定的,包含块不会特指某个元素区域,而是一块视觉假想出来的一块区域,理解了

转 图片、多行文字的水平垂直居中

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示.关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法.淘宝团队似乎提供了一种不错的方法,用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额外标签:需要记住一些比例参数,上手较难:原理艰深,兼容性不稳定等.但是在我看

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

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示. 关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法.淘宝团队似乎提供了一种不错的方法, 用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额 外标签:需要记住一些比例参数,上手较难:原理艰深,兼容性不稳定等.但是

前端技术之CSS实现图片垂直居中

前端技术之CSS实现图片垂直居中技术 maybe yes 发表于2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically  来自 : LMLPHP后院 让 图片实现水平居中比较简单,只需要在父级容器中添加属性 text-align 为 center 即可.使用纯 CSS 实现图片的垂直居中,可以将图片包裹容器的 d

CSS实现文字和图片的水平垂直居中

关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很开心?超级简单的问题,一个text-align:center 就搞定了.过过过... -------------------------------------下面看单行.多行文本的垂直居中------------------------------------- 2.垂直居中:

纯css实现文字及图片水平垂直居中

1.图片及文字水平居中只需要加上text-align:center即可: 2.单行文本垂直居中,高度等于行高即可: 3.多行文本及图片垂直居中: 需要在外面嵌套两层,第一层设置固定高度 height,和display:table;第二层加上display:table-cell;vertical-align:middle;即可实现(IE7及以下无效) 4.图片垂直居中的另一种方案,兼容任何浏览器: 在图片外面嵌套一层,设置好高度 display: table-cell;vertical-align

实现文字图片垂直居中的总结性方法

首先附带HTML代码 <div class="box box1 box2 box3 box4 box5 box7 box8 box9"> <div>垂直居中</div> </div> 接着附带box为公共样式 .box{ width: 200px; height: 200px; background: pink; } 第一种方法box1:display: table-cell; 兼容ie8及以上.适用于文字与图片 css代码如下: .bo

css实现文字相对于图片垂直居中

一 要实现的样式,文字在图片的垂直居中位置 二 实现的代码: <style> .flag{ position: absolute; bottom: 0; width: 23rem; height: 2.5rem; line-height: 2.5rem; } .flag img{ width: 1.58rem; height: 2.1rem; vertical-align: middle; } </style> <div class="flag">

文字转图片APP工具技术分析

首先我推荐下这款文字转图片APP.只有Android版本. 图标: 功能: 文字转图片,目前支持自定义生成图片尺寸(默认为手机宽度*自适应高度),支持字体大小,颜色,背景色,背景图,字体,行间距设置,以及自定义水印.并且增加了二维码功能和文件导入生成功能,其中二维码功能用于文字生成二维码后,使用文字转图片二维码扫描后,会立即生成对应的文字图片,支持加密!自定义密钥等功能,后期的创新功能陆续开发中! 截图: 核心技术: 采用Canvas和TextPaint画笔实现核心文字转图片功能. 下载地址:h