<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>元素盒子垂直居中的实现方法</title>

<style type="text/css">

#parent {

    width:500px;

    height:500px;

    background-color:#188eee;

display: table;}

#child {

    width:100px;

    height:auto;

    max-height:200px;

    overflow-y:scroll;

    display: table-cell;

    vertical-align: middle;

}

#child text{

    display:block;

    width:80%;

    margin-left:10%;

    height:40px;

    line-height:40px;

    background-color:#fff;

    text-align:center;

    border-bottom:1px #f1f1f1 solid;

}

#child text:last-child{

    border-bottom:0px;

}

</style>

</head>

<body>

<div id="parent">

    <div id="child">

        <text>111</text>

        <text>222</text>

        <text>333</text>

        <text>444</text>

        <text>555</text>

    </div>

</div>

</body>

</html>

html中元素盒子垂直居中的实现方法的更多相关文章

  1. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  2. css元素水平垂直居中的十种方法

    四月底在杭州金诚的前端面试过程中,问到了父元素中子元素水平和垂直居中的方式,因为平时疏于整理,只说上来两种.后来面试过了,所以现在回想到这个问题,所以针对各种情况集中整理一下. 首先看页面结构和元素的 ...

  3. leetcode-575-Distribute Candies（计算一个数组中元素的种类的快速方法）

    题目描述: Given an integer array with even length, where different numbers in this array represent diffe ...

  4. CSS中元素水平居中和垂直居中的方法

    #CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...

  5. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点？ 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

  6. css 实现元素水平垂直居中总结5中方法

    个人总结,如有错误请指出,有好的建议请留言.o(^▽^)o 一.margin:0 auto:text-align:center:line-height方法 <div id="divAu ...

  7. 让div盒子相对父盒子垂直居中的几种方法

    div相对于父盒子垂直居中的几种方法,之前在网上看到很多种方法,确实说的很对,也很具体,但是我感觉对于初学者来说,一目了然是最重要的,所以,我把很高深的技巧,和很复杂的css样式都剔除掉,旨在让更多人 ...

  8. CSS中盒子垂直居中的常用方法

    在前端开发过程中,盒子居中是常常用到的.其中 ,居中又可以分为水平居中和垂直居中.水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现.但是垂直居中相对来说是比较复杂一些的.下面 ...

  9. CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）

    本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...

随机推荐

  1. installEventFilter可以安装到任何QObject的子类，并不仅仅是UI组件。事件过滤器和安装过滤器的组件必须在同一线程，在它们分属在不同线程时，事件过滤器也是不起作用的

    Qt的事件知识点: ①事件对象创建完毕后,Qt 将这个事件对象传递给 QObject 的 event() 函数.event() 函数并不直接处理事件,而是将这些事件对象按照它们不同的类型,分发给不同的 ...

  2. saltstack相关

    通过saltstack实现根据不同业务特性进行配置集中化管理,分发文件,采集服务器数据,操作系统基础及软件包管理等第一层为web交互层,采用django+mysql+bootstarp实现,服务端采用 ...

  3. Linux 系统默认运行级别设定

    #vi /etc/inittab,将 id:5:initdefault: 改为 id:3:initdefault: Linux 系统任何时候都运行在一个指定的运行级上,并且不同的运行级的程序和服务都不 ...

  4. （2.1）DDL增强功能-数据类型、同义词、分区表

    1.数据类型 (1)常用数据类型 1.整数类型 int 存储范围是-2,147,483,648到2,147,483,647之间的整数,主键列常设置此类型. (每个数值占用 4字节) smallint ...

  5. 用SQL语句检查CPU和磁盘空间

    --查看4小时内的CPU变化值,1分钟统计一次 DECLARE @ts_now BIGINT; SELECT @ts_now = ms_ticks FROM sys.dm_os_sys_info; - ...

  6. 006-线程同步解决【ReentrantLock】

    一.解决方案 004-线程同步问题引出.同步问题解决.死锁.生产者与消费者 通过以上文章可知,通过原子性AtomicLong .以及内部锁(synchronized)机制可以解决线程安全问题.以下是一 ...

  7. python中的TCP及UDP

    python中是通过套接字即socket来实现UDP及TCP通信的.有两种套接字面向连接的及无连接的,也就是TCP套接字及UDP套接字. TCP通信模型 创建TCP服务器 伪代码: ss = sock ...

  8. UI自动化测试框架之Selenium关键字驱动

    一.原理及特点 1. 关键字驱动测试是数据驱动测试的一种改进类型 2. 主要关键字包括三类:被操作对象(Item).操作(Operation)和值(value),用面向对象形式可将其表现为Item.O ...

  9. Spring MVC 复习笔记04

    复习 springmvc框架: DispatcherServlet前端控制器:接收request,进行response HandlerMapping处理器映射器:根据url查找Handler.(可以通 ...

  10. 离线安装Cloudera Manager5.2.0和CDH5 2.0

    第一次安装出现了各种问题,尤其是对于不是太熟悉linux系统的更是头疼不已呀!特此记录一下,希望能够让小伙伴们少走点弯路. 1.给机器添加路由 (根据自己的机器情况,可以忽略)   route add ...