css文本垂直水平居中
一、单行文本居中
.content{
height:100px;
line-height:100px;
text-align:center;
border:1px solid red;
}
效果图
二、多行文本垂直水平居中
.wrap{
background:green;
width:100%;
display:table;
height:100px;
overflow:hidden;
} .content{
border:1px solid red;
display:table-cell;
width:550px;
vertical-align:middle;
text-align: center;
}
效果图
css文本垂直水平居中的更多相关文章
- css实现垂直水平居中的方法(个数不限)?
方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...
- css实现垂直水平居中的5种方法
css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...
- css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法?)
实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...
- CSS之垂直水平居中的背后
最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每 ...
- CSS实现垂直水平居中
HTML结构: <div class="wrapper"> <div class="content"></div> < ...
- Css实现垂直水平居中的六种方法
经常在项目中用到,今天总结了一下: 演示地址:http://codepen.io/anon/pen/xGdpOa 以下两个类为公共类,便于更好的显示效果,非核心代码 .common{ width: 6 ...
- CSS布局--垂直水平居中
···设置两个盒子 <div class="parent"> <div class="child"> </div></ ...
- CSS - flex 垂直水平居中
display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */
- css实现垂直水平居中的方法
html结构: <div class="box"> <div>垂直居中</div> </div> 方法1:display:flex ...
随机推荐
- exception = {"元数据集合中已存在具有标识“xxx”的项。\r\n参数名: item"}
vs提示:exception = {"元数据集合中已存在具有标识"xxx"的项.\r\n参数名: item"} 出现这个错误说明有重复的字段,有可能是继承的类里 ...
- 使用 Python 操作 Git 版本库 - GitPython
GitPython 是一个用于操作 Git 版本库的 python 包, 它提供了一系列的对象模型(库 - Repo.树 - Tree.提交 - Commit等) 用于操作版本库中的相应对象. 版本库 ...
- Java中的日志——Java.util.logging、log4j、commons-logging
Java中给项目程序添加log主要有三种方式,一使用JDK中的java.util.logging包,一种是log4j,一种是commons-logging.其中log4j和commons-loggin ...
- [国家集训队]最长双回文串 manacher
---题面--- 题解: 首先有一个直观的想法,如果我们可以求出对于位置i的最长后缀回文串和最长前缀回文串,那么我们枚举分界点然后合并前缀和后缀不就可以得到答案了么? 所以我们的目标就是求出这两个数列 ...
- 从零开始学Linux系统(四)之Vi/Vim操作指令
模式切换: 编辑模式 <-- [:]<--命令模式 -->[a.i.o A.I.O]--> 插入模式 编辑模式操作: 设置行号 :set nu :set nonu 复制 ...
- 51nod 1257 背包问题 V3(分数规划)
显然是分数规划...主要是不会求分数的形式,看了题解发现自己好傻逼QAQ 还是二分L值算出d[]降序选K个,顺便记录选择时候的p之和与w之和就可以输出分数形式了... #include<iost ...
- JavaScript颜色选择器的实现
下面的JavaScript取色器可以方便网页设计取色,同时也可以看一下,网上常见的取色器是如何实现的.这里只给出了核心的JavaScript代码,其它部分比如CSS可以参照本页的源代码. JavaSc ...
- 基于http的追加协议、构建web内容的技术、web的攻击技术(9,10,11)
第九章 基于http的追加协议 用来提升http的瓶颈,比如Ajax技术,spdy等 第十章 构建web内容的技术 html.css.js等 第十一章 web的攻击技术 比如sql注入攻击.xss等.
- 51Nod 1013 3的幂的和 快速幂 | 乘法逆元 | 递归求和公式
1.乘法逆元 直接使用等比数列求和公式,注意使用乘法逆元 ---严谨,失细节毁所有 #include "bits/stdc++.h" using namespace std; #d ...
- 数据结构:Rope-区间翻转
BZOJ1269 上一篇文章介绍了Rope的简单应用,这里多了一个操作,区间翻转 同时维护一正一反两个rope……反转即交换两个子串 下面给出代码: #include<cstdio> #i ...