精华内容
下载资源
问答
  • css中对于定宽的非浮动元素用margin:0 auto进行水平居中,对于不定宽的浮动元素也有一个常用技巧,这篇文章就给大家介绍下css如何让浮动元素水平居中,需要的朋友可以来学习下
  • 1.如果浮动元素定宽,可以设置margin:0 auto居中 2.如果浮动元素不定宽,在元素外层创建一个它的父元素 为了不影响其他元素,需要清除浮动 <p style="margin: 1.5em 0;font-size: 13px;color: #fff;float: ...

    1.如果浮动元素定宽,可以设置margin:0 auto居中

    2.如果浮动元素不定宽,在元素外层创建一个它的父元素 为了不影响其他元素,需要清除浮动

    <p style="margin: 1.5em 0;font-size: 13px;color: #fff;float:  left;position:  relative;left: 50%;width:100%;>
       <input type="checkbox" id="service_checkbox" class="" style="float:left;position:relative;right: 50%;">
       <span style="float:left;position: relative;right: 50%;">同意<a style="color: #84B241;">《商家服务协议》和《隐私声明》</a></span>
    </p>
    

      这个是让input和span在p元素中水平居中 垂直居可以用属性 vertical-align: middle; 实现

    转载于:https://www.cnblogs.com/lilelile/p/8204815.html

    展开全文
  • 如何让浮动元素垂直居中

    千次阅读 2017-05-30 22:31:46
    如何让浮动元素垂直居中 个人github:https://github.com/qiilee 欢迎follow 一:   解释:我们可以通过子绝父相的定位方式让子元素的left和top都移动50%,这个时候是整个元素移动到了父元素一半的位置,并...

    如何让浮动的元素垂直居中

    个人github:https://github.com/qiilee  欢迎follow

     

    解释:我们可以通过子绝父相的定位方式让子元素的left和top都移动50%,这个时候是整个元素移动到了父元素一半的位置,并不是两个元素的中线对齐,所以我们需要让子元素再向反方向移动一半的位置,我们可以利用margin-left和margin-top分别移动子元素宽高的一半,但是这种方式并不好,因为子元素的大小一旦被修改,那么我们也要修改margin值才能保持原状,所以我们可以利用css3中的新属性transform,通过translate(-50%,-50%)可以轻松实现功能,并且后续维护修改更方便。

    二、不知道将要垂直居中的盒子的宽高

     

     

    解释:同样,我们需要1、子绝父相的定位方式,只需要给子元素加上

                        2、margin:auto;

                        3、Left:0;right:0;top:0;bottom:0;即可实现。

    方法一和方法二实现的效果:

     

     

    三、关于让img标签在容器中垂直居中的问题

     

     

    效果:

     

     

    注:使用了display:table-cell后无法使用margin和padding。

    展开全文
  • 浮动的元素水平居中,有两种情况,一是浮动的元素有固定的宽度,另一种是无法确定宽度的浮动元素居中。 一、确定宽度的浮动元素 用列表表示的水平菜单栏,浮动在一行,整个菜单的宽度是固定的   &lt;div ...

    为什么会出现浮动元素呢?简单点,比如说,块级元素表示的列表,默认的,每行列表都独占一行显示,如果想让他们排在一行内,就可以使用浮动定位,将元素浮起来,一行排列。浮动的元素水平居中,有两种情况,一是浮动的元素有固定的宽度,另一种是无法确定宽度的浮动元素居中。

    一、确定宽度的浮动元素

    用列表表示的水平菜单栏,浮动在一行,整个菜单的宽度是固定的

     

    <div class="header">
    		<ul>
    			<li>HTML/CSS</li>
    			<li>JavaScript</li>
    			<li>Server Side</li>
    			<li>ASP.NET</li>
    			<li>XML</li>
    			<li>Web Services</li>
    		</ul>
    	</div>	
    <style type="text/css">
    	html,body{margin: 0px;padding: 0px;}
    	ul {list-style: none;}
    	a {text-decoration: none;}
    
    	.header {background: #fbfbfb; width: 700px;margin: 20px auto;height: 50px;font-size: 14px;text-align: center;line-height: 50px;}
    	.header ul li {float: left;width: 100px;}
    </style>

     因为header的宽度是固定的,所以设置header的左右外边距为自动就可满足header整体居中显示,即:margin:20px auto;上下外边距可自动定义。

     

    另:设定header元素的height,同时设定line-height等于height,可以使得header中的元素上下也居中。

    二、无法确定宽度的浮动元素居中

    一个非常简单的例子,就是用列表来表示页码,因为页码会根据的内容的多少有多有少,无法确定其整个元素的宽度

     

    <div class="pagelist">
    	<div class="pages">
    		<ul>
    			<li><a href="#"><<</a></li>
    			<li><a href="#">1</a></li>
    			<li><a href="#">2</a></li>
    			<li><a href="#">3</a></li>
    			<li><a href="#">4</a></li>
    			<li><a href="#">5</a></li>
    			<li>...</li>
    			<li><a href="#">99</a></li>
    			<li><a href="#">100</a></li>
    			<li><a href="#">>></a></li>
    		</ul>
    	</div>
    </div>

     

    <style type="text/css">
    	ul {list-style: none;}
    	a {text-decoration: none;}
    	.pagelist{position: relative;float: left;left: 50%;}
    	.pages {position: relative;float:left;right: 50%; margin: 20px auto;text-align: center;height: 30px;}
    	.pages ul {height: 30px;text-align: center;margin: auto;line-height: 30px;}
    	.pages li{float: left;height: 30px;margin-left: 4px;}
    	.pages ul li a{border: 1px solid #e3e3e3;border-radius: 3px;padding: 0px 10px;}
    </style>

     pages元素显示的是整个页码,并且都浮动在一行,因为pages元素没有固定的宽度,所以,怎么设置pages的左右外边距为自动都不会起效果,设置text-align:center;对其也没有效果,如果这样想的话确实是件很纠结的事。这个时候,需要在pages的外边再添加一个div————pagelist,并且设置 .pagelist {position:relative;float:left;left:50%;} .pages {position:relative;float:left;right:50%;}一样以来,一左一右,就会使得pages中的元素居中显示了

     

    展开全文
  • 如何让绝对定位的div居中? 给div设置一个宽度,然后设置元素的左右外边距为 auto,比如,margin:0px auto。则可以实现 div 居中显示。 对于浮动元素,设置其左右外边距为关键字 auto 是无效的。此时,如果需要设置其...

    如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?

    给div设置一个宽度,然后设置元素的左右外边距为 auto,比如,margin:0px auto。则可以实现 div 居中显示。
    对于浮动元素,设置其左右外边距为关键字 auto 是无效的。此时,如果需要设置其居中显示,可以:
    1、 精确计算其左外边距并进行设置,实现居中显示;
    2、 使用一个居中显示的 div 元素包含此浮动元素,

    展开全文
  • 在父元素高度未知的情况下,如何让浮动的子元素垂直居中?如果存在两个浮动的子元素,如何让其中一个垂直居中,而另一个不变动呢?
  • 居中一个浮动元素 /* 确定容器的宽高 宽500 高 300 的层 设置层的外边距 */ .div { width:500px ; height:300px;//高度可以不设 margin: -150px 0 0 -250px; position:relative; //相对定位 background-color:...
  • 浮动元素的上下左右居中: border: 1px solid red; float: left; position: absolute; width: 200px; height: 100px; left: 50%; top: 50%; margin: -50px 0 0 -100px; 绝对定位的左右居中: border: 1px solid ...
  • 一、如果浮动元素定宽 1.可以设置margin:0 auto居中 #container{ width:400px; height:110px; border:1px solid black; } .content{ width:100px; /*设置同内容元素相同宽度*/ margin: 0 auto; } ....
  • 如何水平居中一个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"&...
  • 1.多个子元素同时设置浮动后,欲想实现水平垂直居中,实现代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...
  • 对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中,对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。 父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对...
  • 不知道怎么就做起前端的工作了,而且越来越... 一、如何让分页码不设宽度的情况下左右居中 第一个问题,是分页码的问题。如果不设置样式。肯定是靠近左边的。比如这样。 有同学很聪明,提出了方案。给它设个...
  • CSS居中一个float浮动元素的核心: 最外面的层相对定位,left等于50%,然后内部嵌套层也使用相对定位且left设为-50%,这样的效果就是内层相对整行为水平居中; #wrapper {float: left;position: relative;text-...
  • 一、清理浮动的三种方法。 当给元素设置了float属性之后,我们知道,元素便会脱离文档流的束缚,像一片水中浮动的树叶随波逐流。但是,在浮动的情况下,可能会导致网页内容出现一些...方法一:在浮动元素后面添...
  • 。。。。在日常代码中,如何让一个浮动元素垂直居中呢? 两种方式: 1.未知元素的宽高====== 2.已知元素宽高====== 首先我们用第一种方式来演示:代码如下: <!DOCTYPE ...
  • 所以#div1的absolute的属性top:50%和left:50%会#div1的左上角为(0,0)点定位到中间 3-所以#div1设置margin-top和margin-left负的自身宽高的一半,这样#div1的(0,0)点就会定到中心点,看起来#div1就居中了 ...
  • div里面,ul中的li如何浮动后可以居中显示的解决办法! 转自:https://www.cnblogs.com/zempty/p/4298343.html **博主这种方法可以不用给li标签添加 float: left;就可以li水平一排显示,但具体的原理没闹懂 <...
  • 如何让浮动后的li在ul中居中显示

    万次阅读 2017-03-29 21:25:22
    其实,只要 ul 的父元素 css 样式设了 text-align: center; 然后 ul 设了 display: inline-block; li 再设 display: inline; 就可以了。 html标签 div id="footer"> ul> li>内容li> ul> div> css...
  • (1) text-align方法: 在父元素中加入"text-align:center;",所有子元素自然水平居中。 也正是因为会使所有子...先元素浮动50%,再元素浮动50%,即可实现水平居中。 .father{ clear:...
  • margin设为auto,对浮动元素或绝对定位元素无效; 2. text-align:center 只能对图片,按钮文字等行内元素进行水平居中;(ie6,7中能对任何元素进行水平居中) 3. 已知固定宽高.out{ width:200px; height:200px;...
  • 昨天做导航遇到一个问题:如何让ul中的li水平居中?  一般我们使用float,然后使用margin或者padding,通过距离让它们居中,但是如果你要做响应式就会发现这样的方法并不好用。我在网上看到大神的方法做了一点小的...

空空如也

空空如也

1 2 3 4
收藏数 67
精华内容 26
关键字:

如何让浮动元素居中