DIV+CSS如何让文字垂直居中？

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。 

CSS网页布局DIV水平居中的各种方法 

一、单行垂直居中 

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如： 

imoker.cn（爱摩客）提供的代码片段：

div {   
  height:25px;   
  line-height:25px;   
  overflow:hidden;   
}
这段代码很简单，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。 

imoker.cn（爱摩客）提供的代码片段：

<!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>   
    <title> 单行文字实现垂直居中 </title>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <style type="text/css">   
      body { font-size:12px;font-family:tahoma;}   
      div {   
        height:25px;   
        line-height:25px;   
        border:1px solid #FF0099;   

      }   
    </style>   
  </head>   
  <body>   
    <div>现在我们要使这段文字垂直居中显示！</div>   
  </body>   
</html> 
不过在Internet Explorer 6及以下版本中，这和方法不支持对图片设置垂直居中。 

二、多行未知高度文字的垂直居中 

如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把<div>完全填充的一种方式而已。可以使用类似下面的代码： 

imoker.cn（爱摩客）提供的代码片段：

div {   
  padding:25px;   
} 
这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。 

imoker.cn（爱摩客）提供的代码片段：

<!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>   
    <title> 多行文字实现垂直居中 </title>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <style type="text/css">   
      body { font-size:12px;font-family:tahoma;}   
      div {   
        padding:25px;   
        border:1px solid #FF0099;   

        width:760px;   
      }   
    </style>   
  </head>   
  <body>   
    <div><pre>现在我们要使这段文字垂直居中显示！   
      div {   
        padding:25px;   
        border:1px solid #FF0099;   
        background-color:#FFCCFF;   
      }   
    </pre></div>   
  </body>   
</html> 
三、多行文本固定高度的居中 

在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素： 

imoker.cn（爱摩客）提供的代码片段：

div#wrap {   
  height:400px;   
  display:table;   
}   
div#content {   
  vertical-align:middle;   
  display:table-cell;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
}

imoker.cn（爱摩客）提供的代码片段：

<!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>    
    <title> 多行文字实现垂直居中 </title>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
    <style type="text/css">    
      body { font-size:12px;font-family:tahoma;}    
        div#wrap {    
        height:400px;    
        display:table;    
      }    
      div#content {    
        vertical-align:middle;    
        display:table-cell;    
        border:1px solid #FF0099;    

        width:760px;    
      }    
    </style>    
  </head>    
  <body>    
    <div id="wrap">    
      <div id="content"><pre>现在我们要使这段文字垂直居中显示！    
        div#wrap {    
          height:400px;    
          display:table;    
        }    
        div#content {    
          vertical-align:middle;    
          display:table-cell;    
          border:1px solid #FF0099;    
          background-color:#FFCCFF;    
          width:760px;    
       }    
      </pre></div>    
    </div>    
  </body>    
</html> 
这个方法应该是很理想了，但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此这种方法在Internet Explorer 6及以下的版本中是无效的。嗯，这让人很郁闷！不过我们还其它的办法。

四、在Internet Explorer中的解决方案 

在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。例如，我们有下面这样一个(X)HTML代码段： 

imoker.cn（爱摩客）提供的代码片段：

<div id="wrap">   
  <div id="subwrap">   
    <div id="content">   
    </div>   
  </div>   
</div>
如果我们对subwrap进行了绝对定位，那么content也会继承了这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中： 

imoker.cn（爱摩客）提供的代码片段：

div#wrap {   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
  height:400px;   
  position:relative;   
}   
div#subwrap {   
  position:absolute;   
  border:1px solid #000;   
  top:50%;   
}   
div#content {   
  border:1px solid #000;   
  position:relative;   
  top:-50%;   
} 
当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释Internet Exlporer 6中这个Bug的原理，我也只是了解了一点皮毛，还要再研究） 

imoker.cn（爱摩客）提供的代码片段：

<!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>   
    <title> 多行文字实现垂直居中 </title>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <style type="text/css">   
      body { font-size:12px;font-family:tahoma;}   
      div#wrap {   
        border:1px solid #FF0099;   

        width:760px;   
        height:400px;   
        position:relative;   
      }   
      div#subwrap {   
        position:absolute;   
        top:50%;   
      }   
      div#content {   
          position:relative;   
          top:-50%;   
      }   
    </style>   
  </head>   
  <body>   
    <div id="wrap">   
      <div id="subwrap">   
        <div id="content"><pre>现在我们要使这段文字垂直居中显示！   
          div#wrap {   
            border:1px solid #FF0099;   
            background-color:#FFCCFF;   
            width:760px;   
            height:500px;   
            position:relative;   
          }   
          div#subwrap {   
            position:absolute;   
            border:1px solid #000;   
            top:50%;   
          }   
          div#content {   
            border:1px solid #000;   
            position:relative;   
            top:-50%;   
          }  
        </pre></div>   
      </div>   
    </div>   
  </body>   
</html>
五、完美的解决方案 

那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器，你可以参考这篇“简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera”： 

imoker.cn（爱摩客）提供的代码片段：

div#wrap {   
  display:table;   
  border:1px solid #FF0099;   
  background-color:#FFCCFF;   
  width:760px;   
  height:400px;   
  _position:relative;   
  overflow:hidden;   
}   
div#subwrap {   
  vertical-align:middle;   
  display:table-cell;   
  _position:absolute;   
  _top:50%;   
}   
div#content {   
  _position:relative;   
  _top:-50%;   
}
 至此，一个完美的居中方案就产生了。 

imoker.cn（爱摩客）提供的代码片段：

<!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>   
    <title> 多行文字实现垂直居中 </title>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <style type="text/css">   
      body { font-size:12px;font-family:tahoma;}   
      div#wrap {   
        display:table;   
        border:1px solid #FF0099;   

        width:760px;   
        height:400px;   
        _position:relative;   
        overflow:hidden;   
      }   
      div#subwrap {   
        vertical-align:middle;   
        display:table-cell;   
        _position:absolute;   
        _top:50%;   
      }   
      div#content {   
        _position:relative;   
        _top:-50%;   
      }   
    </style>   
  </head>   
  <body>   
    <div id="wrap">   
      <div id="subwrap">   
        <div id="content"><pre>现在我们要使这段文字垂直居中显示！   
          div#wrap {   
            border:1px solid #FF0099;   
            background-color:#FFCCFF;   
            width:760px;   
            height:500px;   
            position:relative;   
          }   
          div#subwrap {   
            position:absolute;   
            border:1px solid #000;   
            top:50%;   
          }   
          div#content {   
            border:1px solid #000;   
            position:relative;   
            top:-50%;   
          }  
        </pre></div>   
      </div>   
    </div>   
  </body>   
</html> 
p.s. 垂直居中vertical-align的值是middle，而水平居中align的值是center，虽然同是居中但关键字不同。

转载于:https://www.cnblogs.com/jiangxiaobo/p/5978514.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/254182.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Segments POJ 3304 直线与线段是否相交

Segments POJ 3304 直线与线段是否相交

题目大意&#xff1a;给出n条线段&#xff0c;问是否存在一条直线&#xff0c;使得n条线段在直线上的投影有至少一个公共点。 题目思路:如果假设成立&#xff0c;那么作该直线的垂线l&#xff0c;该垂线l与所有线段相交&#xff0c;且交点可为线段中的某两个交点 证明&#xff…
阅读更多...
Linux Socket编程（不限Linux）

Linux Socket编程（不限Linux）

“一切皆Socket&#xff01;” 话虽些许夸张&#xff0c;但是事实也是&#xff0c;现在的网络编程几乎都是用的socket。 ——有感于实际编程和开源项目研究。 我们深谙信息交流的价值&#xff0c;那网络中进程之间如何通信&#xff0c;如我们每天打开浏览器浏览网页时&#xff…
阅读更多...
互联网移动支付技术_安全架构图（安全技术/安全协议/加密技术）——转载图片...

互联网移动支付技术_安全架构图（安全技术/安全协议/加密技术）——转载图片...

转载于:https://www.cnblogs.com/raulyin/p/7098658.html
阅读更多...
shell之计算文本中单词出现频率

shell之计算文本中单词出现频率

2019独角兽企业重金招聘Python工程师标准>>> Word Frequency&#xff08;https://leetcode.com/problems/word-frequency/description/&#xff09; Example: Assume that words.txt has the following content: the day is sunny the the the sunny is is Your scr…
阅读更多...
一个halcon拟合直线的例子

一个halcon拟合直线的例子

read_image (hImage, E:/vs2012/halcon卡尺例程/白光碗光效果4.bmp) get_image_pointer1(hImage, Pointer, Type, Width, Height) *功能&#xff1a;获取一个通道的指针&#xff0c;得到HTuple Pointer, Type, CurWidth, CurHeight dev_set_draw(margin) dev_set_color (green…
阅读更多...
NLP数据挖掘基础知识

NLP数据挖掘基础知识

Basis(基础)&#xff1a; SSE(Sum of Squared Error, 平方误差和)SAE(Sum of Absolute Error, 绝对误差和)SRE(Sum of Relative Error, 相对误差和)MSE(Mean Squared Error, 均方误差)RMSE(Root Mean Squared Error, 均方根误差)RRSE(Root Relative Squared Error, 相对平方根误…
阅读更多...
SQL Fundamentals || Oracle SQL语言

SQL Fundamentals || Oracle SQL语言

对于SQL语言&#xff0c;有两个组成部分&#xff1a; DML&#xff08;data manipulation language&#xff09; 它们是SELECT、UPDATE、INSERT、DELETE&#xff0c;就象它的名字一样&#xff0c;这4条命令是用来对数据库里的数据进行操作的语言。 DDL&#xff08;data defini…
阅读更多...
圆形卡尺测量后创建模板

圆形卡尺测量后创建模板

read_image (Image, QQ图片20201113111404.jpg) dev_close_window () dev_open_window_fit_image (Image, 0, 0, -1, -1, WindowHandle) dev_display (Image) rgb1_to_gray (Image,Image) ****创建模板阶段 *大致找内圆 fast_threshold (Image, Region, 128, 255, 20) connecti…
阅读更多...
fread函数和fwrite函数,read,write

fread函数和fwrite函数,read,write

fread函数和fwrite函数 1.函数功能 用来读写一个数据块。 2.一般调用形式 fread(buffer,size,count,fp); fwrite(buffer,size,count,fp); 3.说明 &#xff08;1&#xff09;buffer&#xff1a;是一个指针&#xff0c;对fread来说&#xff0c;它是读入数据的存放地址。对fwrit…
阅读更多...
微信小程序 CSS filter（滤镜）的使用示例

微信小程序 CSS filter（滤镜）的使用示例

前言 之前在看七月老师的视频的时候&#xff0c;看到了有一个样式是-webkit-filter&#xff0c;不知道是什么&#xff08;我没咋学过CSS&#xff0c;嘿嘿&#xff0c;所以不知道是啥&#xff09;&#xff0c;于是查了一下&#xff0c;原来是滤镜吖。但是在微信小程序里使用的时…
阅读更多...
vmware ubuntu重置root密码

vmware ubuntu重置root密码

1.重启ubuntu&#xff0c;按住shift&#xff08;开机启动时&#xff09; 2.选择recovery mode,enter 3.root选择root drop to root shell prompt 4.进入shell界面设置密码 (1)mount -rw -o remount / (2)passwd username(设置root用户的密码) 完成以上修改后&#xff0c;重启就…
阅读更多...
halcon使用直线标定板，标定相机内参代码

halcon使用直线标定板，标定相机内参代码

read_image (Image, 直线标定板图片/Left201118140641772.bmp) get_image_size (Image, Width, Height) dev_close_window () dev_open_window_fit_image (Image, 0, 0, -1, -1, WindowHandle) dev_display (Image) * Image Acquisition 01: Code generated by Image Acquisiti…
阅读更多...
dyld: Library not loaded: @rpath/libswiftCore.dylib 解决方法

dyld: Library not loaded: @rpath/libswiftCore.dylib 解决方法

解决&#xff1a; 设置Build Setting - > 搜索 embe关键字 -> 修改属性 见如下图&#xff1a; 如果更新了Xcode 8 这里变成&#xff1a; 转载于:https://www.cnblogs.com/yajunLi/p/5979621.html
阅读更多...
Bootloader及u-boot简介/u-boot系统启动流程

Bootloader及u-boot简介/u-boot系统启动流程

Bootloader及u-boot简介Bootloader代码是芯片复位后进入操作系统之前执行的一段代码&#xff0c;主要用于完成由硬件启动到操作系统启动的过渡&#xff0c;从而为操作系统提供基本的运行环境&#xff0c;如初始化CPU、堆栈、存储器系统等。Bootloader 代码与CPU 芯片的内核结构…
阅读更多...
Dubbo之RPC架构

Dubbo之RPC架构

为什么会有dubbo的出现: 随着互联网的发展&#xff0c;网站应用的规模不断扩大&#xff0c;常规的垂直应用架构已无法应对&#xff0c;分布式服务架构以及流动计算架构势在必行&#xff0c;亟需一个治理系统确保架构有条不紊的演进。 单一应用架构 当网站流量很小时&#xff0c…
阅读更多...
区域路由的注册机制

区域路由的注册机制

AreaRegistration.RegisterAllAreas() 我们新建一个名称为Admin的Area&#xff0c;VS生成下面的代码。 { action , id 我们先来看AreaRegistration这个抽象类&#xff0c;实际上&#xff0c;它只有一个核心功能&#xff0c;就是RegisterAllAreas&#xff0c;获取所有继承它的…
阅读更多...
Unix/Linux IPC及线程间通信总结

Unix/Linux IPC及线程间通信总结

一、互斥与同步 1.互斥&#xff1a;是指某一资源同时只允许一个访问者对其进行访问&#xff0c;具有唯一性和排它性。但互斥无法限制访问者对资源的访问顺序&#xff0c;即访问是无序的。 2.同步&#xff1a;是指在互斥的基础上&#xff08;大多数情况&#xff09;&#xff0…
阅读更多...
CSS样式的插入方式

CSS样式的插入方式

1.外部样式&#xff1a; 当样式需要应用于很多页面时&#xff0c;外部样式表将是理想的选择。<head><link rel"stylesheet" type"text/css" href"mystyle.css" /> </head> 2.内部样式 当单个文档需要特殊的样式时&#…
阅读更多...
嵌入式Linux系统基础知识

嵌入式Linux系统基础知识

一、嵌入式Linux系统的构成 1、硬件 2、内核 3、应用程序&#xff08;形成根文件系统&#xff09; 二、构建嵌入式Linux系统的主要任务 1、内核部分 2、应用程序部分 嵌入式Linux的开发大致可分为三个层次&#xff1a;引导装载内核、构造文件系统和图形用户界面。作为操作系统…
阅读更多...
win10系统javac不是内部或外部命令，也不是可运行的程序 或批处理文件。

win10系统javac不是内部或外部命令，也不是可运行的程序 或批处理文件。

按照下面的步骤设置环境变量 说明&#xff1a; 1. 如果编辑的是系统环境变量&#xff0c;命令提示符需要以管理员权限运行&#xff1b;如果在用户环境变量中编辑&#xff0c;则当前用可直接运行命令提示符。 2. win10中的路径相对于win7要设置成绝对路径。 1&#xff0e;打开…
阅读更多...
最新文章

Copyright @ 2022~2023