不固定宽度的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 ...
随机推荐
- 取SQL分组中某几行数据
常用的方法有:子查询.ROW_NUMBER.APPLY,总体感觉还是ROW_NUMBER比较直观 if OBJECT_ID('testGroup') is not null drop table te ...
- unity, TRANSFORM_TEX
TRANSFORM_TEX在UnityCG.cginc中定义. ----补充: 为啥buildin shader Unlit-Normal.shader中有一个float4 _MainTex_ST变 ...
- unity,set ugui rectTransform anchor by script
如果想用代码实现与下面面板相同的功能 试验可知改变上面选项下面四个值也随之变化: 所以说明二者是一回事儿. 因此,只要通过代码修改RectTransform的anchorMax和anchorMin成员 ...
- thread_线程创建
创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable接口. 这2种方式都有一个缺陷就是:在执行完任务之后无法获取执行结果.如果需要获取执行结果,就必须通过共享变量或者使用线 ...
- Android Studio怎样import module(针对非gradle)
相同的,非gradle编译的project和gradle编译的在import module上相同有一些差别. 包含操作上,显示上的一些差别,曾经的文章中,仅仅要没有标注"非gradle&qu ...
- 0047 Spring的AOP入门基础--切面组件--通知--切入点
AOP的全称是Aspect Oriented Programming,面向切面编程. 切面是什么呢,就是一个Java类.之所以叫切面,就是说在调用其他一些类的方法的某个时候(之前,之后,抛异常等),调 ...
- 在Django中使用F()函数
F()允许Django在未实际链接数据的情况下具有对数据库字段的值的引用.通常情况下我们在更新数据时需要先从数据库里将原数据取出后方在内存里,然后编辑某些属性,最后提交.例如这样 # Tintin f ...
- 阿里正式发布《Java开发手册》终极版!
摘要: 本文讲的是阿里正式发布<Java开发手册>终极版!,别人都说我们是码农,但我们知道,自己是个艺术家.也许我们不过多在意自己的外表和穿着,但我们不羁的外表下,骨子里追求着代码的美.质 ...
- java对象实现深复制的方法
p2 = (Person)org.apache.commons.lang3.ObjectUtils.cloneBean(p); Person p2 = new Person(); p2 = (Pers ...
- 数据库设计(三)11 important database designing rules which I follow
原文地址:https://www.codeproject.com/Articles/359654/important-database-designing-rules-which-I-fo 麻辣个