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>
时间： 2024-10-10 23:27:22

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

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

利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中无效.下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点.(可以看看测试页面,有简短解释.) 方法一: 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性. <div id="wrapper"&g

CSS实现垂直居中的常用方法

在前端开发过程中,盒子居中是常常用到的.其中 ,居中又可以分为水平居中和垂直居中.水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现.但是垂直居中相对来说是比较复杂一些的.下面我们一起来讨论一下实现垂直居中的方法. 首先,定义一个需要垂直居中的div元素,他的宽度和高度均为300px,背景色为橙色.代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

css标签属性及用法

css标签及属性 HTML引入CSS的方法 1.嵌入式  <style type = "text/css">要写的样式</style> 2.外联式  <link rel = "stylesheet"  type = "text/css"  href = "css/public.css"  /> 3.行内式(主要用于JS控制元素的样式):style="color:red;"

css 文字垂直居中问题

CSS 文字垂直居中问题 问题:在 div 中文字居中问题: 当使用 line-height:100%%; 时,文字没有居中,如下: html: <div id="header_logo_des"></div>CSS: #header_logo_des{ width: 100%; height: 100%; font-size: 28px; text-align:center; line-height: 100%; /*设置line-height与父级元素的he

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

顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https://blog.csdn.net/bwf_erg/article/details/69844527 MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align 六种方法:https://www.jianshu.com/p/08

css标签选择器

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="K

CSS 文字垂直居中

div.wrap { display: table; width: 100%; position: absolute; left: 0; top: 0; height: 100%; text-align: center; font-size: 1.2em; line-height: 1.2em; vertical-align: middle; color: #094D7E; font-weight: bold; _position: absolute; overflow: hidden; } d

CSS实现垂直居中

一.单行内容的居中只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,再加上 over-flow: hidden 就可以了 .middle-demo-1{height: 4em;line-height: 4em;overflow: hidden;} 优点:1. 同时支持块级和内联极元素2. 支持所有浏览器缺点:1. 只能显示一行2. IE中不支持<img>等的居中要注意的是:1. 使用相对高度定义你的 height 和 line

CSS标签内多余内容隐藏

CSS: 1 <style> 2 .mazey{width:100px;} 3 .nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} 4 </style> HTML: 1 <div class="mazey nowrap">http://www.mazey.net/baby/blog/#http://www.mazey.net/baby/blog/#http://www