如何垂直居中一个浮动元素(未知元素的宽高)

<style>
　　#div{
　　　　width: 800px;
　　　　height: 500px;
　　　　border: 1px solid gold;
　　　　position: relative;
　　}
　　#div1{
　　　　width: 200px;
　　　　height: 200px;
　　　　background-color: cyan;
　　　　position: absolute; /*父元素需要相对定位*/
　　　　margin: auto;
　　　　top: 0;
　　　　left: 0;
　　　　bottom: 0;
　　　　right: 0;
　　　}
</style>

<body>
　　<div id="div">
　　　　<div id="div1"></div>
　　</div>
</body>

原文地址：https://www.cnblogs.com/qihunliupo/p/8116895.html

时间： 2024-08-04 08:34:10

如何垂直居中一个浮动元素(未知元素的宽高)的相关文章

如何垂直居中一个浮动元素

如何垂直居中一个浮动元素 // 方法一:已知元素的高宽 #div1{ width:200px; height:200px; position: absolute;        /*父元素需要相对定位*/ top: 50%; left: 50%; margin-top:-100px ;   /*二分之一的height,width*/ margin-left: -100px; } //方法二:未知元素的高宽 #div1{ width: 200px; height: 200px; margin:au

如何垂直居中一个浮动元素？

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 // 方法一:已知元素的高宽 #div1{ width:200px; height:200px; position: absolute;        //父元素需要相对定位 top: 50%; left: 50%; margin-top:-100px ;   //二分之一的height,width margin-left: -100px; } /

如何垂直居中一个浮动元素？如何垂直居中一个&lt;img&gt;?

// 方法一:已知元素的高宽 #div1{     background-color:#6699FF;     width:200px;     height:200px;     position: absolute;        //父元素需要相对定位     top: 50%;     left: 50%;     margin-top:-100px ;   //二分之一的height,width     margin-left: -100px;  }   //方法二:未知元素的高宽 #

如何让一个浮动元素既水平又垂直居中

2016年3月22日 让一个普通标签居中很容易,使用div {margin:0 auto}然后利用css可以自动计算元素左右的宽度就可以了 div {margin:0 auto;} 但是让一个浮动元素居中的话,却是无法通过这种形式居中的,因为浮动元素会自动跑到浮动的方向上的最边上,设置的外边框auto根本不起作用. 这时我们可以先把这个元素的位置设置为relative,这样的话就可以通过left属性来将它相对于父元素左边框的距离改为50%,当然这样还是不能实现水平居中的目标,因为元素有自己的宽度

如何居中div？如何居中一个浮动元素？

如何居中div? 给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; } 如何居中一个浮动元素? <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/"> <head> <meta charset="u

可替换元素—行级元素可以设置宽高？

上篇文章讲的是行级元素与块级元素,明明说了行级元素不可设置width,height属性,而为何img.input等行级元素可以设置宽.高??? 看官莫急,下面我会详细解答. 可替换元素 1. 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容.例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而 如果查看(X)HTML代码,则看不到图片的实际内容:又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等. 2. 他们区别一般i

清理浮动的三种常用方法以及如何居中一个浮动元素

千里之行始于足下 今天看到一个题目说如何居中一个float:left的元素的题目,我蛮以为用margin:0 auto 就可以解决了.然而,试验之后,发现事实并非如此,才发现自己对于这方面的知识竟是相当忙乱!于是撇下手头事务,翻书查资料温习了这部分‘简单’的内容.并总结如下. 一.清理浮动的三种方法. 当给元素设置了float属性之后,我们知道,元素便会脱离文档流的束缚,像一片水中浮动的树叶随波逐流.但是,在浮动的情况下,可能会导致网页内容出现一些我们并不想让其发生的干扰,例如其父元素的包裹作用

如何居中一个浮动元素?

CSS代码 1 width:500px; height:300px; float:left; margin-left:50%; position:relative; left:-250px; background-color:#CCC; 代码解读 首先设置块元素的宽度和高度,这里宽度是必须的,高度可以不设,我设置了块的背景色,以给大家看效果.实现居中关键在于 margin-left:50%; position:relative; left:-250px; 设置margin-left:50%;后浮

为什么有些行内元素可以设置宽高

元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”).但是不同的元素显示的方式会有所不同,例如<div>和<span>就不同,而<strong>和<p>也不一样.在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的原因之一. 1. 替换和不可替换元素 从元素本身的特点来讲,可以分为替换和不可替换元素. a) 替换元素 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容