css 标签 垂直居中
<!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 标签 垂直居中的更多相关文章
- 五种方法让CSS实现垂直居中
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...
- CSS实现垂直居中的5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...
- 转: css实现垂直居中的方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中 ...
- 顽石系列：CSS实现垂直居中的五种方法
顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...
- css 文字垂直居中问题
CSS 文字垂直居中问题 问题:在 div 中文字居中问题: 当使用 line-height:100%%; 时,文字没有居中,如下: html: <div id="header_log ...
- css标签及属性
css标签及属性 HTML引入CSS的方法 1.嵌入式 <style type = “text/css”>要写的样式</style> 2.外联式 <link rel ...
- CSS水平垂直居中总结
行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...
- css图片垂直居中
css图片垂直居中一.style代码 .case-pic{ height: 125px; position: relative; text-align: center } .case-pic span ...
- CSS标签居中
CSS标签居中是相对于父标签说的,即在父标签的中居中.通常是在子标签中使用margin:0 auto,来使子标签居中.此外子标签需要有固定的宽度才行,比如 子标签为div时,div的宽度默认占父标签的 ...
随机推荐
- RTSP协议详解
RTSP(Real Time Streaming Protocol)是由Real Network和Netscape共同提出的如何有效地在IP网络上传输流媒体数据的应用层协议.RTSP对流媒体提 ...
- Subway---poj2502（最短路）
题目链接:http://poj.org/problem?id=2502 人走路的速度是10km/h,地铁的速度是40km/h题目给出一个起点,一个终点,以及几条地铁线路运行的站点.题目给的点的做坐标单 ...
- ByteBuffer
1.堆内:HeapByteBuffer,在java的堆内创建. 缺点:可能引起堆的不断gc 写文件的时候需要先将堆的buffer写进直接buffer里,然后再写入文件 2.堆外:DirectByteB ...
- 个人常用iOS第三方库以及XCode插件介绍
第三方库 CocoaPod CocoaPod并不是iOS上的第三方库 而是大名鼎鼎的第三方库的管理工具 在CocoaPod没有出现之前 第三方库的管理是非常痛苦的 尤其是一些大型的库(比如nimbus ...
- stretchableImageWithLeftCapWidth 的使用方法
- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight: (NSInteger)topCa ...
- python 内容查询小助手
点我,点我,python os.path 模块: 点我,点我,Python logging模块详解 点我,点我,python两个 list 获取交集,并集,差集的方法 点我,点我,python,my ...
- POJ 1039问题描述
Description The GX Light Pipeline Company started to prepare bent pipes for the new transgalactic li ...
- pip使用国内镜像服务器
国内在使用pip安装python组件时特别慢,最好是使用国内的镜像获取python组件.测试过几个镜像服务器,douban的速度相对较快和稳定,因此经常用它作为镜像. 具体的修改步骤在pip手册上有, ...
- Epoll模型详解
Linux 2.6内核中提高网络I/O性能的新方法-epoll I/O多路复用技术在比较多的TCP网络服务器中有使用,即比较多的用到select函数. 1.为什么select落后 首先,在Lin ...
- Linux系统 ssh图形界面远程
远程Linux系统有图形界面 1.下载xming 并安装启动 2.通过putty登陆虚拟机 3.输入gnome-session