如何居中浮动元素

方法一:给浮动添加一个父级元素

<style type="text/css">
        .con {
            position: relative;
            float: left;
            left: 50%;
            background: rgb(5, 175, 231);
        }
        .box {
            position: relative;
            float: left;
            left: -50%;
            width: 100px;
            height: 100px;
            background: lightcoral;
        }
    </style>
    <body>
        <div class="con">
            <div class="box"></div>
        </div>
    </body>

蓝色的con为砖红色box的“爸爸”,从图上我们可以很清楚的看到, con通过定位往左移了百分之五十。而box通过相对定位,定位在con的-50%的地方,即为正中心。

给子元素相对定位,是想将相对于父元素来定位自己的位置,float:left让子元素在同一水平线上显示,left:-50%是因为子元素的整体宽度就是父元素的宽度,left:50%就是让子元素内容往相对父元素左上那一点往左移动父元素一半的宽度(right:50%是距右边50%,效果一样),正好实现子元素内容居中显示的效果。

原文地址:https://www.cnblogs.com/ganiner/p/11518289.html

时间: 2024-10-06 03:37:58

如何居中浮动元素的相关文章

浮动元素居中&amp;&amp;浮动元素内容相对于浮动元素父元素居中

一:浮动元素内容相对于浮动元素父元素居中 我们知道元素内容居中可以用text-align:center;但是如果元素是浮动的呢?就像下边这样,怎样使得所有链接水平居中? <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>浮动元素内容相对于浮动元素父元素居中</title> <style type="text/css"&g

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

1.如何居中一个浮动元素? 方法一:已知元素的高度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 方法一:已知元素的高宽*/ #div1{ background-color:#6699FF; width:200px; height:20

浮动元素居中的实现方法~~很不错

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float center</title> <style> .demo { /*最外层容器居中 非必要*/ border: 1px solid #CCC; margin: 5px auto; overflow: hidden; width: 143

Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?

题目点评 这道题目的提问比较多,连续问了三个问题,正常元素.绝对定位元素.互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要清楚.可以先把水平居中各种情况说清楚,然后在把垂直居中说清楚. (一)元素水平居中的方式 1)行级元素水平居中对齐(父元素设置 text-align:center) [html] view plain copy <div style="width: 200px; height: 100px;b

css浮动元素居中,右边宽固定而左边宽自适应

1.浮动元素居中 固定宽高的情况下: width:200px;height: 200px;position: absolute;left:50%;top:50%;margin-left: -100px;margin-top: -100px; 未知宽高的情况下: width:200px;height: 200px;position: absolute;left:50%;top:50%;transform:translate(-50%,-50%); 2.右边宽固定,左边宽自适应html: <div

如何居中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

如何居中一个浮动元素?

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%;后浮

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

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

总结一下各种居中(内联元素、块级元素、浮动元素、绝对定位元素)*(水平、垂直)

在平时写网页样式的时候,元素居中应该是最常见不过的了,在这里我们把常见居中的情况简单总结一下.本文讨论以下几种情况:内联元素.块级元素.浮动元素.绝对定位元素.居中的情况分两种情况:水平居中和垂直居中.刚接触到居中,我想到的是两个方向,一是使元素内部的所有元素相对于此元素居中,另一个是元素在其他元素中居中.以下的居中我们讨论的都是元素在其他元素中居中. (一)内联元素 水平居中:只需在其父元素的样式中加上text-align: center;即可. 垂直居中: 1. line-height 2.