精华内容
下载资源
问答
  • 宽度高度不固定div水平居中演示如下: 水平居中代码: html部分<div class=container><div class=center><a>1</a><a>2</a><a>3</a><div xss=removed></div></div> css部分.container{width:500px;height:80px;...
  • 宽度高度不固定的div如何水平居中与垂直居中 很多新手在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示。 如果div有固定宽度的话,用padding,margin都...

    宽度高度不固定的div如何水平居中与垂直居中

    很多新手在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示。
    如果div有固定宽度的话,用padding,margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况,我们就不能用margin,padding设置固定的距离了。这个问题让很多人头疼。而怎么样才能让这个div居中显示呢?其实这种情况解决的办法也是有很多种,js,css都可以实现。

    这里主要介绍一下采用css的方法,有什么问题还请各位看官指出。我在这里写了一个demo演示页面,查看比较详细的解说和演示的话,请移步宽度高度不固定的div,如何水平居中以及垂直居中演示页面


    宽度不固定的div如何设置水平居中:

    <style type="text/css">
    .container{width:500px;height:80px;background:#C2300B;margin-left:50px;padding-top:10px;text-align:center;}
    .center{display:inline-block;border:2px solid #fff;}
    .center{_display:inline;} /*针对ie6 hack*/
    .center a{float:left;border:1px solid #fff;padding:5px 10px;margin:10px;color:#fff;text-decoration:none;}
    </style>
    <div class="container">
    <div class="center"><a href="#">1</a><a href="#">2</a><a href="#">3</a>
    <div style="clear:both"></div></div>

    无固定宽度的div水平居中代码要点:

    这种div宽度不固定的情况,常见于分页处,由于分页不确定有多少页,所以用于分页的元素所在的容器宽度通常不是固定的。
    父容器container加css属性 text-align:center;子容器center加css属性display:inline-block;
    .center{_display:inline;} 为针对ie6的hack,针对ie6前面的display:inline-block;的作用是在ie下触发元素的layout,使其haslayout。(关于haslayout,此处有涉及


    高度不固定的div如何设置垂直居中

    <div id="vc"><div id="vci"><div id="content">
    我们垂直居中了,我们水平居中了
    </div></div></div>
    <style type="text/css">
    #vc { display:table; background-color:#C2300B; width:500px; height:200px; overflow:hidden; margin-left:50px; _position:relative; }
    #vci { vertical-align:middle; display:table-cell;  _position:absolute; _top:50%; }
    #content { color:#fff; border:1px solid #fff;  _position:relative; _top:-50%;  }
    </style>

    无固定高度的div垂直居中代码要点:

    父容器vc的css属性 display:table;overflow:hidden;
    子容器vci的css属性 vertical-align:middle;display:table-cell;
    针对ie6的hack,vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;
    更详细的介绍,下面传送门


     

     

    转载于:https://www.cnblogs.com/allvie/p/3838046.html

    展开全文
  • <div id="box"> <div id="container"></div> </div> #box{ position: relative; } #container{ position: absolute; width:30%; ...
    <div id="box">  
        <div id="container"></div>  
    </div>  
    #box{  
        position: relative;  
      
    }  
    #container{  
        position: absolute;  
        width:30%;  
        height:100px;  
        background: #ccc;  
        left: 0;  
        right: 0;  
        margin:100px auto;  
    }  

     

    转载于:https://www.cnblogs.com/panlaixing/p/8953606.html

    展开全文
  • 很多人都会遇到这样的问题:如何使DIV居中,div垂直居中,div水平居中.
  • 如何DIV盒子水平居中呢?本节DIVCSS5让大家实现DIV布局水平居中。 一、div居中实现介绍 - TOP 在布局一张网页时,通常网页主体框架是居中于浏览器中的。实现最外层DIV水平居中与浏览器中需要一个条件和一个设置...

    DIV 居中之div水平居中 让DIV布局居中篇

    如何让DIV居中呢?如何让DIV盒子水平居中呢?本节DIVCSS5让大家实现DIV布局水平居中。

    一、div居中实现介绍   -   TOP

    在布局一张网页时,通常网页主体框架是居中于浏览器中的。实现最外层DIV水平居中与浏览器中需要一个条件和一个设置。

    假如最外层DIV盒子CSS命名为“#divcss5”,这个时候为了兼容各大浏览器实现最外层的这个盒子居中。

    一条件:
    这个时候对“body”设置css内容居中样式(text-align:center)

    CSS代码

    1. body{text-align:center} 

    一设置:

    这个时候对“#divcss5”设置居中必备样式css margin
    即CSS代码:

    1. #divcss5{margin:0 auto} 

    二、DIV居中用法实例   -   TOP

    为了便于观察布局居中效果,我们再对“#divcss5”加一个css边框为黑色,css宽度为300px;高度为100px样式。

    1、最终得到DIV居中的CSS代码:

    1. body{ text-align:center} 
    2. #divcss5{margin:0 auto;border:1px solid #000;width:300px;height:100px} 

    2、对应html代码片段:

    1. <div id="divcss5">DIV水平居中案例</div

    3、居中案例截图

    实现div居中实例截图
    DIV水平居中效果图

    4、在线演示:查看案例

    转载于:https://www.cnblogs.com/ylei11/p/10459575.html

    展开全文
  • 如何水平居中一个div? 1.不需要知道宽高 css: #wrap{ width: 200px; height: 200px; background: orange; position: absolute/fixed; top:0;bottom:0;left: 0;right: 0;margin:auto; } html: <div id="wrap"&...

    如何水平居中一个div?

    1.不需要知道宽高

    css:
    #wrap{
    width: 200px;
    height: 200px;
    background: orange;
    position: absolute/fixed;
          top:0;bottom:0;left: 0;right: 0;margin:auto;
    }
    html:
    	<div id="wrap"</div>
    

    2.知道宽高

    css:
    	#wrap{
    	width: 200px;
    	height: 200px;
    	background: orange;
    	position: absolute;
    	top:50%;left: 50%;margin-top:-100px;margin-left: -100px;
    }
    html:
    	<div id="wrap"</div>
    

    3.弹性盒

    css:
    	*{margin:0;padding: 0;}
    	html,body{
    		height: 100%;
    	}
    	body{
    		display: flex;
    		justify-content: center;
    		align-items: center;
    	}
    	#wrap{
    	width: 200px;
    	height: 200px;
    	background: orange;
    	}
    html:
    		<div id="wrap"</div>
    

    如何居中一个浮动元素?

    css:
    .outerbox {
    	float: left;
    	position: relative;
    	left: 50%;
    }
    
    .innerbox {
    	float: left;
    	position: relative;
    	right: 50%;
    }
    html:
    <div class="outerbox">
    	<div class="innerbox">我是浮动的</div>
    </div>
    

    如何让绝对定位的div居中

    css:
    .center{
             position: absolute; /*绝对定位*/
             width: 500px;
             height:300px;
             background: red;
             margin: 0 auto; /*水平居中*/
             left: 0; /*此处不能省略,且为0*/
             right: 0; /*此处不能省略,且为0*/
    }
    html:
    <div class="center"></div>
    
    展开全文
  • 如何让一个div垂直水平居中
  • css div 水平居中Introduction: 介绍: Working with DIVs has become a regular thing and divs are used for many purposes to mention such as they are used to structure our code and to segregate our ...
  • CSS 如何使DIV水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? ...
  • 多个div如何水平垂直居中 在它们的 父级div 上写入 如下 css -webkit-display: flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-...
  •  引子 我们经常遇到需要把div中的...所以,这里介绍一种方法,可以使div水平居中和垂直居中。 代码: html lang="en"> head> meta charset="UTF-8"> title>div水平垂直居中title> style> *{ margin:0;
  • div是html中的一个标签,一般称之为盒子。... div水平居中其实很简单,只要使用到margin中的auto就能实现。代码如下: <html> <head> <title>div水平居中</title&...
  • 多个a标签如何div水平居中

    万次阅读 2018-08-02 01:12:32
    那么如何让多个a标签水平居中呢? 方法: 在div中设置text-align: center; 使文字居中就可以了。 拓展1 可以给a标签设置padding值进行来设置宽度高度,一般不会给a标签设置具体的宽度和高度。 拓展2 做导航时,要...
  • 世界上并没有完美的程序,但是我们并不因此而沮丧,因为写程序就是一个不断追求完美的过程。 .cus-h-center { margin : 0 auto; }
  • 实现目标 divOuter包裹divInner,实现divInner的垂直水平居中

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 820
精华内容 328
关键字:

div如何水平居中