未知行数的文字在div中垂直居中

　　今天工作中遇到一个问题，就是未知行数的文字在div中怎么垂直居中，如下面的3个图：

图1

图2

图3

　　图1是2行文字的效果，图2是不经过css垂直居中处理的效果，图3是经过css垂直居中后的效果，html代码如下：（经测试，除了IE7，其他浏览器都成功的垂直居中了）

<div class="m"><div class="m1"><div class="m2">南京证券股份业部份业部</div></div></div>

.m { height:40px; line-height:18px; padding-left:20px; font-size:14px; font-weight:bold; color:#333333; margin:5px 0; background:url(../images/gsBg.png) no-repeat 0 0; display:table; _position:relative;}
.m1 { vertical-align:middle; display:table-cell; _position: absolute; _top:50%;}
.m2 { _position:relative; _top:-50%;}

　　后面一篇文章是我转载的一篇参考资料。

时间： 2024-10-08 06:01:08

未知行数的文字在div中垂直居中的相关文章

文字在div中垂直居中的方法，设置div的高度height和行高line-height一致

文字在div中垂直居中的方法,设置div的高度height和行高line-height一致,如 .containerdiv{ height:60px; line-height:60px; }

随机图片大小在DIV中垂直居中对齐总结

老遇到这种样式 现在总结一下 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> *{margin:0;padding:0;line-height: 1;font-size: '宋体';padding

a标签内容在div中垂直居中，不兼容低版本浏览器

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head> <style>.box{width:100px;height:200px;background:orange;border:2px solid #ccc;display: table;}.box a{dis

使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式

text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px solid green; /*边框*/ text-align: center; /*文字水平居中对齐*/ line-height: 200px; /*设置文字行距等于div的高度*/ o

未知宽高元素如何在一个div中上下左右居中对齐

<body> <div id="div1"> <img src="../06图片懒加载/img/img1.png"/> </div></body> 那么,img元素如何在div中居中对齐呢? 第一种方法:第一步:在img标签后面添加一个span元素 <body> <div id="div1"> <img src="../06图片懒加载/img/im

设置span在div中垂直居中

转自:https://blog.csdn.net/weirenkuan/article/details/51177695 使用display:table-cell,span中内容无论多少,都可以垂直居中 <div style="display:table-cell;height:100px;font-size:12px;font-height:14px;vertical-align:middle;text-align:center"> <span> ceshic

小div在大div中垂直居中，以及div在页面垂直居中

<html> <head> <title>淘宝 2faner</title> <style type="text/css"> .big{ width: 800px; height: 500px; background: #333; position:absolute;left: 50%; top: 50%; margin-left:-400px;  margin-top: -250px; } .small{ width: 40

APICloud学习笔记之input 在div 中垂直居中

效果 div 1 <header id="header"> 2 <div class="left" tapmode onclick="fnOpenCitySelectorFrame();"> 3 <div class="city" id="city">北京市北京市北京市</div> 4 <div class="arrow" id=&q

CSS-布局【1】-图片在div中垂直居中

方法一:在img标签前加span <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title></title> <style type="text/css"> div{ width: 600px; height: 600px; text-ali