Heim > Web-Frontend > HTML-Tutorial > 怎么让两个DIV块,居中?_html/css_WEB-ITnose

怎么让两个DIV块,居中?_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 09:08:01
Original
1346 Leute haben es durchsucht


不知为什么会居左,如何让其居中
代码如下:
??????????
@media screen and  (max-width: 600px) {
    .heading,
    .container,{
        width: 400px;
    }
    .main{
        float: left;
        height: 600px;
    }

    .left,
    .right{
        float: left;
        height: 200px;
        width: 400px;;
        background-color: blue;
    }

    .main {
        width: 400px;
        overflow: scroll;
    }
    .heading{
        width:400px;
        height:153px;
    }
    .container {
        height: 600px;
    }

    header{
        font-size:.6em;
        font-weight: bold;
        width: 100%;
    }
    a{
        font-weight: bold;
        text-decoration: none;    /*decoration 修饰 装饰*/
    }
    header nav a{
        text-decoration: none;
        font-weight: bold;
    }
    header nav ul li a{
        display: block;/*和前面的inline,是不是冲突?*/
        float: left;
        padding: .1em 0.8em .1em;/*top right bottom*/
        border-right: .1em solid;/*每个链接的右边框*/
    }


回复讨论(解决方案)

把margin:0px auto;添加到div样式里面

去掉{float:left;}就居中了,
可是为什么,宽幅为960和600px的时候设置float:left;就正常?
当浏览器宽度是小于600设置float:left;就会这样?

去掉float:left;设置margin:0px auto;就行了

给你篇文章系统学习一下!
http://note.youdao.com/share/?id=f93315310f22d0d2f4103bcbd6dfc922&type=note

清浮动

margin:0px auto;

感觉浮动那个有问题,正在学,暂时想不出好办法。看其他大神的。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage