不定宽高的文字在div中垂直居中
本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢?
现在来总结一下:
在body中写入结构
<div id="main">
<div id="login">
djshdk awjdsd sede sfcdf vdj sh dkaw jds dse desf cdf vd jsh dkawjd sds ede sfcdfv vd jsh dkawjd sds ede sfcdfv.
</div>
</div>
方法一:
#main{
position: relative; //在父元素中使用相对定位
width: 200px;
height: 200px;
overflow: hidden;
background-color: #ff0;
padding: 10px;
}
#login{
position: absolute; /*在子元素中使用绝对定位*/
top:50%; /*距离相对于父元素的50%的高*/
left:50%;
background-color: #eee;
-webkit-transform:translate(-50%,-50%); /*CSS3的样式,:translate(-50%,-50%)相对于自己距离x轴和y轴的-50%*/
}
方法二:
#main{
width: 200px;
height: 200px;
background-color: #eee;
display: table; /*让标签元素以表格的形式呈现*/
}
#login{
display: table-cell; /*ie7和ie6都不能识别 display: table-cell;*/
vertical-align: middle;
}
今天是第一次写随笔,从基础开始。加油!
不定宽高的文字在div中垂直居中的更多相关文章
- 未知行数的文字在div中垂直居中
今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...
- 一个未知宽高的元素在div中垂直水平居中
<body> <div id="#div1"> <img src="img1.png"></img> </ ...
- 设置文字在div中垂直居中,使用line-height
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-19) line-height 行间距 详细使用方法:http://www.w3school.com.cn/css/pr ...
- css实现div不定宽高垂直水平居中解决方案
在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...
- css实现不定宽高的div水平、垂直居中
一共有三个方案: 1,第一种方案主要使用了css3中transform进行元素偏移,效果非常好 这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示. 兼容方面也一样拿IE来做比较,第二种方法IE ...
- Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- 不定宽高的DIV,垂直水平居中
1.怎么让一个不定宽高的DIV,垂直水平居中? 答:1)使用CSS方法. 父盒子设置: display:table-cell; text-align:center; vertical-align:mi ...
- css两种常用的不定宽高的水平垂直居中方法,记住它,不再为样式发愁
css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...
- 文字在div中水平和垂直居中的的css样式
文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...
随机推荐
- windows下Idea结合maven开发spark和本地调试
本人的开发环境: 1.虚拟机centos 6.5 2.jdk 1.8 3.spark2.2.0 4.scala 2.11.8 5.maven 3.5.2 在开发和搭环境时必须注意版本兼容的问题 ...
- cnd 计费流量查询服务模块设计与实现
一.cdn模块结构: 2.内部模块结构:
- scrapy 请求和响应
scrapy Request类的一些参数意义 url: 就是需要请求,并进行下一步处理的url callback: 指定该请求返回的Response,由那个函数来处理. method: 一般不需要指定 ...
- Android Toast语句应用
1.findViewById()函数使用 函数作用:通过id来找到前台界面的组件 2.Toast语句 (1)介绍 (2)用法 (3)代码示例 package com.lucky.test21; imp ...
- paraview plot over line
- POJ - 2891 中国剩余定理
\(mod\)存在不互素情况下的CRT #include<iostream> #include<algorithm> #include<cstdio> #inclu ...
- Codeforces - 240F 是男人就上26棵线段树
#include<bits/stdc++.h> using namespace std; const int maxn = 1e5+11; typedef long long ll; ch ...
- python爬虫之认识爬虫和爬虫原理
python爬虫之基础学习(一) 网络爬虫 网络爬虫也叫网络蜘蛛.网络机器人.如今属于数据的时代,信息采集变得尤为重要,可以想象单单依靠人力去采集,是一件无比艰辛和困难的事情.网络爬虫的产生就是代替人 ...
- request-statistics.lua
--[[ 实现请求统计,并且将单位时间内异常次数达到阀值的请求加入到黑名单中 --]] --获取共享内存 local limit_req_store = ngx.shared.limit_req_st ...
- setContentView和inflate区别
一般用LayoutInflater做一件事:inflate inflate这个方法总共有四种形式(见下面),目的都是把xml表述的layout转化为View对象.其中有一个比较常用,View infl ...