当前位置: 首页 > 编程日记 > 正文

CSS中实现DIV容器垂直居中

1.vertical-align:middle 垂直对齐

如表格元素中的<td>、<th>、<caption>等,而像<DIV>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。

2.text-align:center  文本水平居中

一、单行垂直居中

如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如:

ExampleSourceCode

  1. DIV{  
  2. height:25px;  
  3. line-height:25px;  
  4. overflow:hidden;  //使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行
  5. }  
  6.  不过在InternetExplorer6及以下版本中,这和方法不支持对图片设置垂直居中。

二、多行未知高度文字的垂直居中

如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<DIV>完全填充的一种访求而已。可以使用类似下面的代码:

  1. DIV{  
  2. padding:25px;  
  3. }  

这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

转载于:https://www.cnblogs.com/peng14/archive/2013/04/28/3048740.html

相关文章:

如何制作自己的CocoaPod库

作者 OneTea 关注 2016.12.29 18:02* 字数 848 阅读 102评论 0喜欢 6制作流程图&#xff1a; 流程图1.将代码托管在github上 1.1本地代码 如图&#xff1a; Snip20161228_7.png在github上创建 并上传 Snip20161228_3.png切换到本地项目cd xxx路径后 用git命令行 &#xff08;…

【HTTP协议】域名

1. 域名的出现 IP协议将物理网卡的MAC地址抽象转化为4位数字数字化的IP地址对人不友好&#xff0c;需要友好的域名便于人类识别标记 2. 域名的形式 域名是一个有层次的结构——一串用’.分隔的多个单词【主机名.二级域名.顶级域名】最左边是主机名【eg&#xff1a;www提供万…

iOS 多级下拉菜单

前言 App 常用控件 -- 多级下拉菜单, 如团购类, 房屋类, 对数据进行筛选. 有一级, 二级, 三级, 再多就不会以这种样式,呈现给用户了. 作者就简单聊一下 多级下拉菜单 二级下拉筛选菜单.png一 目标 默认显示一个 TableView, 点击数据后, 添加第二个TableView, 并实现大小变化第二…

fork有啥用

#include <stdio.h>#include <sys/types.h>#include <unistd.h>int main(){ pid_t pid1; pid_t pid2; pid1 fork(); pid2 fork(); printf("pid1:%d, pid2:%d\n", pid1, pid2);}输出&#xff1a;pid1:3411, pid2:3412 //父进…

Html Agility Pack基础类介绍及运用

Html Agility Pack 源码中的类大概有28个左右&#xff0c;其实不算一个很复杂的类库&#xff0c;但它的功能确不弱&#xff0c;为解析DOM已经提供了足够强大的功能支持&#xff0c;可以跟jQuery操作DOM媲美&#xff1a;&#xff09; 基础类和基础方法介绍 Html Agility Pack最常…

【Python自动化测试】setuptools

setuptools Python标准的打包分发工具使用简单的setup.py文件&#xff0c;将Python应用打包 最基础的setup.py文件 #!/usr/bin/env python3 # -*- coding: utf-8 -*- from setuptools import setup setup(nameMyDemo, # 应用名version1.0, # 版本号packages[myd…

企业级-Mysql双主互备高可用负载均衡架构(基于GTID主从复制模式)(原创)

前言&#xff1a;原理与思想这里选用GTID主从复制模式Mysql主从复制模式&#xff0c;是为了更加确保主从复制的正确性、健康性与易配性。这里做的是两服务器A,B各有Mysql实例3310&#xff0c;两个实例间互为主从主从复制模式采用GTID主从复制模式&#xff0c;在服务器A,B上配置…

Objective-C自动生成文档工具:appledoc

作者 iOS_小松哥 关注 2016.12.13 15:47* 字数 919 阅读 727评论 10喜欢 35由于最近琐事比较多&#xff0c;所以好久没有写文章了。今天我们聊一聊Objective-C自动生成文档。 做项目的人多了&#xff0c;就需要文档了。手工写文档是一件苦差事&#xff0c;但是我们也有从源码中…

void main()是错的!

很多人甚至市面上的一些书籍&#xff0c;都使用了void main( )&#xff0c;其实这是错误的。C/C中从来没有定义过void main( )。C之父Bjarne Stroustrup在他的主页上的FAQ中明确地写着The definition void main( ) { /* ... */ } is not and never has been C, nor has it even…

Some tips

VScode自动换行 Code -> Perference -> Setting [ “editor.wordWrap”: “on” ]

iOS 自定义转场动画初探

最近项目刚迭代&#xff0c;正好闲下来捣鼓了一下iOS的自定义转场的效果。闲话不多说&#xff0c;直接开始上代码吧。(ps&#xff1a;请忽略实际的转场效果&#xff0c;关注技术本身呢哦。pps&#xff1a;主要是转场的动画做的比较low啦&#xff01;) 1、首先定义一个转场动画的…

Delphi实现WebService带身份认证的数据传输

WebService使得不同开发工具开发出来的程序可以在网络连通的环境下相互通信,它最大的特点就是标准化(基于XML的一系列标准)带来的跨平台、跨开发工具的通用性,基于HTTP带来的畅通无阻的能力(跨越防火墙)。WebService给我们的软件开发带来了诸多好处,但是有一点还是必须要考虑到…

【Linux学习笔记】 - 什么是Linux?

Linux Linux内核 GNU工具 组成部分 Linux内核GUN工具图形化桌面环境应用软件 Linux内核 地位&#xff1a;Linux核心&#xff0c;控制计算机系统上的所有硬件和软件。必要时&#xff0c;分配硬件&#xff0c;并根据需要执行软件 主要功能&#xff1a; a. 系统内存存储 ——…

【转】 Android快速开发系列 10个常用工具类 -- 不错

原文网址&#xff1a;http://blog.csdn.net/lmj623565791/article/details/38965311 转载请标明出处&#xff1a;http://blog.csdn.net/lmj623565791/article/details/38965311&#xff0c;本文出自【张鸿洋的博客】 打开大家手上的项目&#xff0c;基本都会有一大批的辅助类&a…

CollectionView侧滑刷新

作者 SoDoIt 关注 2017.03.05 16:39 字数 33 阅读 31评论 0喜欢 2ABSideRefresh.gif效仿MJRefresh写的侧滑刷新&#xff0c;原理不讲了&#xff0c;需要的直接看代码 GitHub&#xff1a;https://github.com/wangjingyu0018/ABRefresh.git

函数功能MATLAB

近期一直在查找函数功能之类的题问,现在正好有机会和大家享共一下. 百科名片 录目 简介开展程历要主功能新特性版本分析特色优势开展简介开展程历要主功能新特性版本分析特色优势开展编辑本段 简介 matlab开辟任务面界 编辑本段 开展程历 编辑本段 要主功能 1.数值析分 2.数值和…

[HTTP协议]基础篇-待完结

文章目录输入网址后回车输入网址后回车 简单的浏览器HTTP请求过程&#xff1a; 浏览器从地址栏输入中获取服务器IP地址和端口号浏览器用TCP的三次握手与服务器建立连接浏览器向服务器发送拼好的报文服务器收到报文后处理请求&#xff0c;同样拼好报文再发给浏览器浏览器解析报…

IAR之工程配置

参考 : IAR的Workspace顶部下拉菜单中Debug和Release http://blog.csdn.net/yanpingsz/article/details/5588525 最近买了zigbee模块的开发板回来研究, 其中一个实验程序里面有三个版本, 分别是路由/终端/协调器, 忙活了半天不知道同一个project是如何配置成3个不同的版本的. …

CoreText入坑一

CoreText是Mac OS和iOS系统中处理文本的low-level API, 不管是使用OC还是swift, 实际我们使用CoreText都还是间接或直接使用C语言在写代码。CoreText是iOS和Mac OS中文本处理的根基, TextKit和WebKit都是构建于其上。 一. 基础 1.在使用CoreText编写代码之前, 需要先了解一些基…

mysql连接hang住问题分析

【问题现象】&#xff1a; 1. Linuxc多线程连接mysql数据库&#xff0c;每次都是短连接&#xff0c;操作完后就释放连接&#xff0c;有时候会出现mysql_real_connect挂住的现象 2. 挂住超时mysql_real_connect返回后报错如下&#xff1a;Lostconnection to MySQL s…

【Linux学习笔记】 -- 基本Shell命令

常见的目录名均基于文件系统层级标准(filesystem hierarchy standard&#xff0c;FHS) Linux的四个部分&#xff1a; 1 Linux内核&#xff1a;控制所有硬软件&#xff0c;必要时分配硬件根据需要执行软件 系统内存管理&#xff1a;可用物理内存 创建、管理虚拟内存[交换空间…

【OpenCV】图像代数运算:平均值去噪,减去背景

代数运算&#xff0c;就是对两幅图像的点之间进行加、减、乘、除的运算。四种运算相应的公式为&#xff1a; 代数运算中比较常用的是图像相加和相减。图像相加常用来求平均值去除addtive噪声或者实现二次曝光&#xff08;double-exposure&#xff09;。图像相减用于减去背景或周…

简明 Vim 练级攻略(转)

vim的学习曲线相当的大&#xff08;参看各种文本编辑器的学习曲线&#xff09;&#xff0c;所以&#xff0c;如果你一开始看到的是一大堆VIM的命令分类&#xff0c;你一定会对这个编辑器失去兴趣的。下面的文章翻译自《Learn Vim Progressively》&#xff0c;我觉得这是给新手最…

iOS 的离屏渲染

原文链接&#xff1a;http://www.imlifengfeng.com/blog/?p593OpenGL ES 是一套多功能开放标准的用于嵌入系统的 C-based 的图形库&#xff0c;用于 2D 和 3D 数据的可视化。OpenGL 被设计用来转换一组图形调用功能到底层图形硬件&#xff08;GPU&#xff09;&#xff0c;由 G…

MySQL 常见操作指令

什么是SQL&#xff1f; SQL&#xff08;Structured Query Language&#xff09;用于访问和操作数据库的结构化查询语言。 数据库包含一个或多个表&#xff0c;每个表均有名称标识&#xff0c;包含数据的记录&#xff08;行&#xff09;。 典型的SQL语句 1. SELEC语句 SELE…

iOS 实现点击微信头像效果

来源&#xff1a;伯乐在线 - 小良 如有好文章投稿&#xff0c;请点击 → 这里了解详情 如需转载&#xff0c;发送「转载」二字查看说明 公司产品需要实现点击个人主页头像可以放大头像、缩放头像、保存头像效果&#xff08;和点击微信个人头像类似&#xff09;&#xff0c;故找…

HDU 4292 Food(dinic +拆点)

题目链接 我做的伤心了&#xff0c;不知是模版效率低&#xff0c;还是错了&#xff0c;交上就是TLE&#xff0c;找了份别人的代码&#xff0c;改了好几下终于过了。。 1 #include <cstdio>2 #include <cstring>3 #include <queue>4 #include <map>5 #i…

jQuery中用ajax访问php接口文件

js代码 function ajax_request(){var result;var articleId new Object();articleIdgetArticleId();$.ajax({url: "/topicPage/getComment.php",//请求php文件的路径data:{id:articleId},//请求中要传送的参数,会自动拼接成一个路径&#xff0c;在php中用get方式获取…

Python 数据库操作 psycopg2

文章目录安装基本使用安装 psycopg 是 Python 语言中 PostpreSQL数据库接口 安装环境&#xff1a; Python&#xff1a;v2.7, v3.4~3.8PostGreSQL&#xff1a;7.4~12 pip install psycopg2基本使用 import psycopg2def connect_db(host: str,port: int,database: str,user:…

Android logcat命令详解

一、logcat命令介绍 1.android log系统 2.logcat介绍 logcat是android中的一个命令行工具&#xff0c;可以用于得到程序的log信息 log类是一个日志类&#xff0c;可以在代码中使用logcat打印出消息 常见的日志纪录方法包括&#xff1a;方法 描述 v(String,String) (vervbose)显…