<!DOCTYPE html >

<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">

 div#wrap {

  display:table;

  border:1px solid #FF0099;

  background-color:#FFCCFF;

  width:380px;

  height:200px;

  _position:relative;

  overflow:hidden;

 }

 div#subwrap {

  vertical-align:middle;

  display:table-cell;

  _position:absolute;

  _top:50%;

 }

 div#content {

  _position:relative;

  _top:-50%;

 }

 .p{

     width:200px;

     height:200px;

     background-color:lightblue;

     display: table;

 }

 .c{

     display: table-cell;

    width:50px;

     height:50px;

     background-color:lightgreen;

 }

</style>

</head>

<body>

<div id="wrap">

     <div id="subwrap">

         <div id="content">

             <div style="width:100px;height:100px;background-color:black;margin:0 auto;"></div>

         </div>

     </div>

</div>

</body>

</html>

css 标签 垂直居中的更多相关文章

  1. 五种方法让CSS实现垂直居中

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  2. CSS实现垂直居中的5种方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...

  3. 转: css实现垂直居中的方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中 ...

  4. 顽石系列：CSS实现垂直居中的五种方法

    顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...

  5. css 文字垂直居中问题

    CSS 文字垂直居中问题 问题:在 div 中文字居中问题: 当使用 line-height:100%%; 时,文字没有居中,如下: html: <div id="header_log ...

  6. css标签及属性

    css标签及属性 HTML引入CSS的方法 1.嵌入式  <style type = “text/css”>要写的样式</style> 2.外联式  <link rel ...

  7. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

  8. css图片垂直居中

    css图片垂直居中一.style代码 .case-pic{ height: 125px; position: relative; text-align: center } .case-pic span ...

  9. CSS标签居中

    CSS标签居中是相对于父标签说的,即在父标签的中居中.通常是在子标签中使用margin:0 auto,来使子标签居中.此外子标签需要有固定的宽度才行,比如 子标签为div时,div的宽度默认占父标签的 ...

随机推荐

  1. .Net程序员安卓学习之路2：访问网络API

    做应用型的APP肯定是要和网络交互的,那么本节就来实战一把Android访问网络API,还是使用上节的DEMO: 一.准备API: 一般都采用Json作为数据交换格式,目前各种语言均能输出Json串. ...

  2. 常用yum命令

    yum list 查询所有可用软件包 yum search 关键字 查询和关键字相关的包 yum -y install 包名 加上-y自动回答yes yum -y update 包名 升级  yum ...

  3. Nmap 網路診斷工具基本使用技巧與教學

    Nmap 是一個開放原始碼的網路掃描與探測工具,可以讓網路管理者掃描整個子網域或主機的連接埠等,功能非常強大. Nmap(Network Mapper)是一個開放原始碼的網路檢測工具,它的功能非常強大 ...

  4. (leetcode)Add Digits

    Given a non-negative integer num, repeatedly add all its digits until the result has only one digit. ...

  5. LightOj1383 - Underwater Snipers（贪心 + 二分）

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1383 题意:在平面图中,有一条河,用直线y=k表示,河上面(y>k)的都是敌方区 ...

  6. 替换SearchBar 键盘上的 搜索 按钮

    for (UIView *searchBarSubview in [searchBar subviews]) {        if ([searchBarSubview conformsToProt ...

  7. int和long int的区别

    16位系统:long是4字节,int是2字节32位系统:long是4字节,int是4字节64位系统:long是8字节,int是4字节 long long 占8个字节

  8. Android --Android Stuido混淆签名打包

    参考博客:Android studio 使用心得(五)—代码混淆和破解apk 参考博客:Android studio 使用心得(四)---android studio 多渠道打包 参考博客:Andro ...

  9. 第十篇 Integration Services：高级事件行为

    本篇文章是Integration Services系列的第十篇,详细内容请参考原文. 简介在前一篇, we introduced fault tolerance by examining method ...

  10. [转]qt中文乱码问题

    http://blog.csdn.net/brave_heart_lxl/article/details/7186631#