不固定宽度的div居中显示
对于div的居中 ,如果是有固定宽高的,可以加margin:auto;水平垂直居中,但如果是不固定宽高,又想让div居中的话,这种方式都可能不奏效,达不到想要的效果。
有两种方法:1、加display:inline;变成内联元素,可以给父级加text-align:center
2.
.inwrap {
float: left;
position: relative;
left: 50%;
}
.page {
float: left;
position: relative;
left: -50%;
}
<div class="wrap clearfix">
<div class="inwrap">
<div class="page">
这是内容
</div>
</div>
</div>
不固定宽度的div居中显示的更多相关文章
- 设置div中的div居中显示
设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> s ...
- DIV居中显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 让几个横向排列的浮动子div居中显示的方法
div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...
- 多个div居中显示
页面中有多个div时我们希望并排居中显示,可以通过在并排显示的div上一层再加一个div,设定宽度,然后让其居中显示达到需要的效果. 关键是要对外层div设定宽度. <!DOCTYPE html ...
- css div居中显示的4种写法
Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...
- div 居中显示
<html lang="en"> <head> <meta charset="UTF-8"> <title>di ...
- 【HTML】div居中显示
方法1: .parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width ...
- 使用inline-block,使前面img,后面空div居中显示在一行后,导致当div中有内容时,div下移问题
.pro_li img,.pro_sm{display: inline-block; *display:inline;*zoom:1;vertical-align: middle ;} 解决方法:使用 ...
- 【转】div居中代码 DIV水平居中显示CSS代码
原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...
随机推荐
- Android studio 使用心得(三)—从Eclipse迁移到Android studio
断断续续的也算是把eclipse上的代码成功迁移到android studio上来了,现在,我同事继续用eclipse,我用android studio,svn上还是之前eclipse的项目,迁移成功 ...
- SQL数据库相关
数据库相关知识点 SQL, 对表的理解, 对表的主键, 外键的理解, 视图, 为什么要有视图, 视图有什么功能, 视图与表有什么区别 主键是唯一标识的一条记录,不能重复,不能为空. 表的外键是另一个表 ...
- 经典.net面试题目(转载)
1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . private : 私有成员, 在类的内部才可以访问. protected : 保 ...
- javascript跨域訪问探索之旅
需求: 近期工作负责一个互联网应用A(我公司应用)与还有一个互联网应用B进行通讯.通讯的方式是这种:还有一个互联网应用某些表单信息须要从我公司的互联网应用获取.首先用户訪问互联网应用B ...
- NEFU 117-素数个数的位数(素数定理)
题目地址:NEFU 117 题意:给你一个整数N(N<1e9).假设小于10^N的整数中素数的个数为π(N).求π(N)的位数是多少. 思路:题目的数据量非常大,直接求肯定TLE,所以考虑素数定 ...
- node多项目同时运行,nginx端口监听转发
在服务器端安装pm2 npm install npm2 -g --save 之后再项目目录下运行 pm2 start app.js 在查看进程,是否已经启动 pm2 list 多个项目,我们只要监听端 ...
- linux学习笔记14--命令which和whereis
我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索: which 查看可执行文件的位置. whereis 查看文件的位置. ...
- Android最流行的网络框架(原创)
Android程序最重要的模块就是网络部分,如何从网络上下载数据,如何将处理过的数据上传至网络,往往是android程序的关键环节. Android原生提供基于HttpClient和Ht ...
- flutter datatable
最后,还是用到了 PaginatedDataTable 我把header改成了最终条件显示. 主要是要有listview之类的scrollview容器,否则会报错. 切换页的时候,记得加入空行,否则会 ...
- 说明反转控制(IOC)和面向方向编程(AOP)在spring中的应用
说明反转控制(IOC)和面向方向编程(AOP)在spring中的应用 解答:Spring 核心容器(Core)提供Spring框架的基本功能.核心容器的主要组件是BeanFactory,它是工厂模式的 ...