使用inline-block做水平垂直居中
父级宽高不定，如何使子元素水平垂直居中？
下面是用 display: inline-block 实现的：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直自适应</title>
<style>
* {
margin: 0; padding: 0;
}
.box {
position: relative;
width: 400px; height: 600px;
margin: 100px auto;
border: 1px solid #666;
text-align: center;
}
.content {
width: 100px; height: 100px;
display: inline-block;
vertical-align: middle;
background: red;
}
.middle-span {
height: 100%;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
<span class="middle-span"></span>
</div>
</body>
</html>
子级 display: inline-block; ，父级 text-align: center; ，实现水平居中。
子级 vertical-align: middle; ，且span height: 100%; ，实现垂直居中。
使用inline-block做水平垂直居中的更多相关文章
- css实现水平/垂直居中效果
一.如果是已知宽高的元素做水平/垂直居中效果的话,可以直接用具体的数值指定定位布局或偏移布局,这个就不过多讨论.这里主要介绍在不知宽高或需要弹性布局下的几种实现方式. 二.1.table表格法思路:显 ...
- 如何将一个div水平垂直居中？4种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
- 如何将一个div水平垂直居中？6种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
- CSS制作水平垂直居中对齐
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...
- CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...
- CSS制作水平垂直居中对齐 多种方式各有千秋
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...
- 解读 CSS 布局之水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...
- CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）
本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...
- IE6+未知尺寸元素水平垂直居中
首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错 ...
随机推荐
- 天底下最简单的QT画图板，就一个类，60行代码
简单直观.但是我有个问题是,这实际上不是在绘制直线,而是几千几万个超级短的“直线”,这样会不会效率很低呢? 注意,每次绘制的时候,需要一支笔,这支笔需要设置颜色和宽度(就像我们平时写字也要稍微挑一下笔 ...
- http调试工具,linux调试工具
charles Linux下Web性能压力测试工具http_load linux 下的socket 调试工具 netcat Linux下四款Web服务器压力测试工具(http_load.webbenc ...
- Qt入门（2）——使用Qt编写的Hello world
对于一个qt初学者来说,一步一步来直到作出一个hello world是最基础的入门. 从菜单:应用程序->编程中找到QtCreator
- Android AlertDialog全屏显示去除白色边框
使用styles.xml风格: Style.xml代码 <style name="FullScreenDialog" parent="android:style/T ...
- HDU_2025——查找最大的字母
Problem Description 对于输入的每个字符串,查找其中的最大字母,在该字母后面插入字符串“(max)”. Input 输入数据包括多个测试实例,每个实例由一行长度不超过100的字符 ...
- 原来你们是这种key-value存储
上周毛老师,在内部分享为我们扫盲了一下Memcached和Redis的支持,讲了很多东西,我一般比较懒不愿意去记东西喜欢把总结成blog,当我忘记的时候可以回头看看.好的废话就说这么多.先看Memca ...
- js让菜单栏一直悬浮在顶部，经典代码
js让菜单栏一直悬浮在顶部,经典代码 很简单,你只需要把下面代码放到js中:$(function(){ //获取要定位元素距离浏览器顶部的距离 var na ...
- Android两种 旋转Bitmap方法
方法1. 利用Bitmap.createBitmap Bitmap adjustPhotoRotation(Bitmap bm, final int orientationDegree) { ...
- Codeforces 385C Bear and Prime Numbers
题目链接:Codeforces 385C Bear and Prime Numbers 这题告诉我仅仅有询问没有更新通常是不用线段树的.或者说还有比线段树更简单的方法. 用一个sum数组记录前n项和, ...
- Android Fragment详解(二)：Fragment创建及其生命周期
Fragments的生命周期 每一个fragments 都有自己的一套生命周期回调方法和处理自己的用户输入事件. 对应生命周期可参考下图: 创建片元(Creating a Fragment) To c ...