css中的特殊居中

大图居中:

先看一下普通的居中:

代码为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .img{
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="center">
    <img class="img" src="1.jpg" width="684" height="384">
</div>
</body>
</html>

浏览器100%的时候显示为:

浏览器缩小时:

如图,当浏览器大小小于图片大小的时候,图片会贴靠在左边而不再移动。

我的理解是,当图片设置为居中,浏览器界面小于图片大小的时候,浏览器会挤住图片。因为图片小于浏览器的部分,浏览器不愿意收留图片多余的部分,哎图片这可怜的孩儿。当然这种情况我是看不下去的,所以,我强制让浏览器“收留”它。

代码修改为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .center {
            position: relative;
            left: 50%;
        }

        .img {
            display: block;
            /*margin:0 auto;*/
            position: relative;
            left: -342px;
        }
        /*主要的思路就是,图片的中心点为中心,而不是已图片的左上角为中心*/

    </style>
</head>
<body>
<div class="center">
    <img class="img" src="1.jpg" width="684" height="384">
</div>
</body>
</html>

效果图为:

如图,浏览器缩小的时候,图片依然居中。(浏览器,你敢不收留它,废了你\)。



当然拿这个思路也就引出了淘宝著名的“双飞翼布局”。

简要说明一下双飞翼布局,它是当浏览器缩小的时候,中间栏随浏览器变化而变化。而侧栏不随浏览器变化而变化。

先看下效果图:

开始时候:

浏览器缩小的时候:

这种布局和上面的居中方式使用的方法基本差不多。一个字,悟。当然css3中有个方法可以简单实现这种



当然css3中有个方法可以简单实现这种。display:flex。称为“弹性盒子”这种只能ie9+

先看代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子模型</title>
    <style>
        body{
            margin: 0;
        }
        #container{
            display: flex;
            flex-direction: row;
            width: 300px;
            height: 300px;
        }
        .a{
            flex: 1;
            /*width: 100px;*/
            height: 100%;
            background-color: #0099FF;
        }
        .b{
            flex: 1;
            /*width: 100px;*/
            height: 100%;
            background-color: darkorange;
        }
        .c{
            flex: 1;
            /*width: 100px;*/
            height: 100%;
            background-color: palevioletred;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>
<script src="main.js"></script>
</body>
</html>

那代码来说,先给父类一个display:flex。然后给子类设置flex:n。

这种方法的实现思想是,如代码,子类有三个,都设置为,flex:1,意思是每个子类占父类三分之一。

用这种方法可以轻松实现双飞翼布局,如代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子模型</title>
    <style>
        body{
            margin: 0;
        }
        #container{
            display: flex;
            flex-direction: row;
            width: 300px;
            height: 300px;
        }
        .a{
            /*flex: 1;*/
            width: 100px;
            height: 100%;
            background-color: #0099FF;
        }
        .b{
            flex: 1;
            /*width: 100px;*/
            height: 100%;
            background-color: darkorange;
        }
        .c{
            /*flex: 1;*/
            width: 100px;
            height: 100%;
            background-color: palevioletred;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>
<script src="main.js"></script>
</body>
</html>

a,c设置固定宽度,b设置flex:1即可。

时间: 2024-11-03 05:42:05

css中的特殊居中的相关文章

DIV+CSS中让布局居中_背景图片居中_文字内容居中

DIV+CSS中让布局居中_背景图片居中_文字内容居中

CSS中的各种居中方法总结

CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 顾名思义,行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text-align:center 来实现.另外,如果块状元素属性display 被设置为inline时,也是可以使用这种方法.但有个首要条件是子元素必须没有被float影响,否则一切

HTML CSS 中DIV内容居中汇总

转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还望博主见谅) 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valig

CSS中的元素居中

水平居中 内联级或类似内联级的元素 如果需要居中的元素是内联元素(display为inline or inline-*),如text或a时,则可以将其放在块级父元素中,像这样: .center-children {   display:block;   text-align: center; } 这对display为 inline, inline-block, inline-table, inline-flex等样式的元素有用. 源码: HTML <header>  This text is

css中margin的居中应用

1.不固定宽高的fixed框,水平垂直居中 .tab{ position: fixed; width: 302px; border: 1px solid #cccccc; border-radius: 5px; left: 50%; top: 50%; transform: translate(-50%,-50%); margin: 0 auto; box-sizing:border-box; z-index: 9999; } 这里宽是固定的,但是高没有固定.所以使用margin:auto;无法

css中关于居中的问题

居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!! html部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 23.0px Consolas; c

HTML和CSS中的居中效果(1)

HTML和CSS中的居中效果 单行上下左右居中 Html: <div class="container"></div> CSS: .container{ width: 600px; height: 300px; text-align: center; line-height: 300px; border: 1px solid green; } 固定高宽上下左右居中 Html: <div class="container"><

css中position:fixed实现div居中

上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px;} 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即可如果只需要上下居中,那么把 left:0; 或者 right:0; 即可 下面附一个DIV 元素在浏览器窗口居中 其实,实现这个效果并不复杂,利用 CSS 中的 position 定位就可以轻松搞

css中各种居中的奇技淫巧总结

css中各种居中的奇技淫巧总结   第一种,在固定布局中比较常用的技巧设置container的margin:0 auto:   第二种(从布局中入手)   css .outer{ height:200px; width:200px; background:gray; position:relative; } .inner{ width:100px; height:100px; top:50%; left:50%; background:black; position:absolute; marg