CSS设置图片文字垂直居中的方法
display:table-cell; 以表格单元格的形式显示对象 */
vertical-align:middle;/* 内容以对象中部对齐*/
display: inline-block;
CSS设置图片文字垂直居中代码示例:
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>完美的水平垂直居中!!–兼容ie6,ie7,ff,opera,safari的水平垂直居中</title>
<style media=”screen” type=”text/css”>
.wrapper{ width:700px; height:400px; background:#ccc; border:1px #000 solid;}
.holder{width:500px; height:200px; display:table; position:relative; margin:12px auto; border:1px solid #596480; background:#ffc;}
.holder div{*position:absolute; top:50%; left:0; display:table-cell; vertical-align:middle; width:100%;}
.holder p{position: relative; top:-50%; text-align:center; margin:0; padding:0;}
/*
分两套看
holder的 display:table
holder div的 display:table-cell; vertical-align:middle;
就可以实现在ff,safari和opera下的垂直居中,但是对ie系列无效
holder的 position:relative;
holder div的 *position:absolute; top:50%; left:0;
.holder p的 position: relative; top:-50%;
通过控制绝对层的位置实现ie6,7下的垂直居中
holder div中的*position:absolute是只给ie6和7看的css hack
对于水平居中要说的是如果holder div的width如果未指明100%,在ie7中它是不会自动延伸100%的,也就无法实现水平居中*/
</style>
</head>
<body>
<div class=”wrapper”>
<div class=”holder”>
<div><p><img src=”http://bbs.blueidea.com/images/blue/logo.gif” /></p></div>
</div>
<div style=”line-height:40px; background:#006633; font-size:14px; color:#FFFFFF; font-weight:bold; text-align:center;”>
以上的图片垂直并且水平居中,您可以改变holder的height和width进行测试</div>
</div>
</body>
</html>
inline-block的元素既可以像块元素一样定义宽高,又可以和内联元素排列在一行 */
分享到:
相关推荐
1、定制Datawindow GRID模式的外观,包括线条、文本垂直居中、背景颜色和背景图片、选择块颜色、当前行颜色、合并表头、编辑框按钮等 2、提供了窗口自动控件缩放布局功能 3、改进了打开和保存对话框
本文实例讲述了CSS实现同一行的图片和文字垂直居中对齐的方法。分享给大家供大家参考。具体分析如下: 有些朋友会发现,如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于...
今天特意在网上找到了一款插件--jquery.valign,可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果,使用方法: 1、调用jquery库以及本插件 2、jquery方法调用,如本案例第22、23行 使用说明: 外侧...
使用表格的方法来表现设计效果 <style type="text/css"> <!– body{ font-size:12px; font-family:"宋体"; } table{ border:1px solid #E6EFF8; margin-bottom:2px;... fo
效果描述: 在实际网页中,如何实现如何实现父容器... 然后用处理图片垂直居中的方式处理文字的垂直居中即可。 使用方法: 1、将head中的样式复制到你的样式表中 2、将body中的代码部分拷贝过去即可
文字和图片居中显示,在设置时 android:drawableLeft="@drawable/zhoubq_qw" android:gravity="center_vertical
主要介绍了iOS - UIButton(UIEdgeInsets)/设置button上的文字和图片上下垂直居中对齐的相关资料,需要的朋友可以参考下
其实很简单,只需要在尾部增加一个<i></i> ,然后把需要垂直居中的元素设置display:inline-block; vertical-align:middle; 看看效果图 实例代码 复制代码代码如下:<style>*{ margin:0 ; padding:0;}.bg{ ...
以示例的方式介绍了css如何实现文字图片垂直居中效果,需要的朋友可以参考下
单独文字垂直居中想必大家都会了吧,那么文字与图片同排如何实现垂直居中呢?感兴趣的朋友可以了解下面的教程
想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。关于图片垂直居中显示,想必很...
jQuery实现上下左右垂直居中是一款jquery.valign插件,可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果。
可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了。例如: 单行文字居中显示测试,css样式为: height:3em; line-height:3em;…… ② ...
图片文字上下左右垂直居中
浏览器支持 所有浏览器都支持 line-... 解决这个问题可以用pading设置上下填充,但是如果文本框有背景图片的话就会向下凸出一块,此时可以把max-height值设为height的值。 但为什么会出现不居中,实在是搞不明白。
6.3.5 修饰图片的水平和垂直居中 6.4 字体的综合属性 6.4.1 字体的选择 6.4.2 字体的大小 6.4.3 字体的加粗 6.4.4 字体的样式 6.4.5 字体的变形 6.4.6 字体属性的简写 6.5 文本的修饰和链接 6.5.1 文本的修饰 6.5.2 ...