图片和多行文本的垂直居中

<!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 charset="UTF-8">

<title>图片和多行文本的垂直居中</title>

<style type="text/css">

.box01{ line-height: 200px; font-size: 0; font-size: 1px\9; text-align: center; background: #ddd;}

.box01 img{ vertical-align: middle;}

.box02{ line-height: 200px; font-size: 0; font-size: 1px\9; text-align: center; background: #ddd; margin-top: 20px;}

.box02 .text{ display: inline-block; vertical-align: middle; max-width: 70%; line-height: 24px; font-size: 14px; text-align: left;}

.box03{ line-height: 200px; font-size: 0; font-size: 1px\9; text-align: center; background: #ddd; margin-top: 20px;}

.box03 .ico{ display: inline-block; vertical-align: middle; background: url(http://pimg1.4008000000.com/app_images/4008000000/youhui/cpbaoxian/official/nvshenjiehd2016/nsj_ico.png) no-repeat; width: 49px; height: 49px; background-position: -111px 0;}

.box03 .text{ display: inline-block; vertical-align: middle; width: 200px; line-height: 24px; font-size: 14px; text-align: left; margin: 0 0 0 10px;}

</style>

</head>

<body>

<div class="box01">

<img src="http://www.4008000000.com/app_upload/images/newchannel/story/10024802.jpg" width="296" height="162" alt="涉水行驶，“心脏”受得了吗？">&nbsp;

</div>

<div class="box02">

<span class="text">

这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容这就是内容

</span>&nbsp;

</div>

<div class="box03">

<span class="ico"></span>

<span class="text">

这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容

</span>&nbsp;

</div>

</body>

</html>

时间： 2024-10-27 02:39:53

图片和多行文本的垂直居中的相关文章

如何让未知尺寸的图片、单行文本、多行文本水平垂直居中？

先看下效果图: 下面是CSS代码: <style type="text/css"> /*让未知尺寸的图片.单行文本.多行文本水平垂直居中*/ .wrap { border: 1px solid #0094ff; width: 200px; height: 200px; /*下面是实现垂直居中的关键,没有之一*/ display: table-cell; text-align: center; vertical-align: middle; } .wrap .subwrap

关于多行文本的垂直居中

在页面里 文本时必不可少的部分 一般我们做水平居中的时候只需设置 text-align:center; 单行文本的垂直居中直接是行高等于父元素的高度即可 那么当我们做多行文本的垂直居中时 一般是怎么做呢? 一  把文字用块级元素包起来 并设置vertical-align 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>多行文本的居中对齐&l

css未知图片宽高在容器里垂直居中

未知图片宽高在容器里垂直居中 自己总结的一些方法法: 一:比较简单的方法,不存在什么兼容性的问题 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .bo

[CSS]图片、多行文本、多行文本与图片的水平垂直居中

图片垂直居中:IE8+支持 方法1 .box { line-height:300px; text-align:center; } .box>img { vertical-align:middle; } 方法2:添加空元素 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>test</title> <style> p { bord

未知图片大小的自动水平和垂直居中方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>图片自动垂直居中</title><meta http-

div中图片和文字同一行实现垂直居中

vertical-align作用对象为内联元素display设置table-cell后,magin和padding就会失效 #bj { height:100px; color: white; font-size: 30px; margin: 10px 0; display: table-cell; vertical-align: middle;/*div设置高度后,内部元素垂直居中*/ } #bj * { vertical-align: middle;/*实现垂直居中*/ } <body> &

图片在父元素里面水平垂直居中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

一个图片在自适应宽度中的垂直居中且自适应缩放

效果: 晚上刚好群里的问起来,调试了一下,把代码mark一下,方便以后使用 <ul> <li> <div class="pic"><img src="2.png" alt="" /></div> <div class="txt">鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋鞋

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

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