div套a标签水平居中对齐

 

复习一下水平居中

以下效果图中 红色为 download 父级元素 绿色为子元素

方式1

html

    <div id="download1">
        a1<a href="">a1</a><br>
        a2a2<a href="">a2a2</a><br>
        a3<a href="">a3</a><br>
    </div>

css

        #download1{
            /*width: 1000px;*/
            background: red;
            margin: 0 auto;
            /* 让download1在body中居中 */
            text-align: center;
            /* 让a标签在download1中居中 */
        }

效果图

优点  兼容性好

缺点 很显然 文字中线对齐 左边不对齐

 

一下三种方式 父级DIV 如果有内容不适用 父级DIV有严重的偏移

 

方式2

html

    <div id="download2">
            <label for="">a1<a href="">a1</a></label><br>
            <label for="">a2a2<a href="">a2a2</a></label><br>
            <label for="">a3<a href="">a3</a></label><br>
    </div>

css

        #download2{
            background: red;
            position: relative;
            left: 50%;
            /* 父元素向右偏离一半屏幕 */
        }
        #download2 label{
            position: absolute;
            background: green;
            left: -2%;
            /* 子元素向左偏移调整居中 准确调整 -子元素内容宽度/父元素宽度*100% */
        }

效果图

方式3

html

    <div id="download3">
            <label for="">a1<a href="">a1</a></label><br>
            <label for="">a2a2<a href="">a2a2</a></label><br>
            <label for="">a3<a href="">a3</a></label><br>
    </div>

css

        #download3{
            background: red;
            float: left;
            position: relative;
            left: 50%;
            /* 父元素向右偏离一半屏幕 */
        }
        #download3 label{
            position: relative;
            left: -50%;
        }

效果图

 

方式4

html

    <div id="download4">
        <div>
        a1<a href="">a1</a><br>
        a2a2<a href="">a2a2</a><br>
        a3<a href="">a3</a><br>
        </div>
    </div>

css

        #download4{
            background: red;
            position: relative;
        }
        #download4 div{
            background: green;
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            /* 兼容性不好 */
        }

 

效果图

 

子元素绝对定位 父元素高度被清空 所以没背景颜色

 

 最终解决方案

在父级元素上设置宽高

html

    <div id="download4">
        <div>
        a1<a href="">a1</a><br>
        a2a2<a href="">a2a2</a><br>
        a3<a href="">a3</a><br>
        </div>
    </div>

css

        #download4{
            width: 100%;
            height: 200px;
            background: red;
            position: relative;
        }
        #download4 div{
            background: green;
            position: absolute;
            left: 50%;
            top: 25%;
            transform: translate(-50%);
            /* 兼容性不好 */
        }

效果图

 

添加内容测试 效果图

 

posted @ 2018-09-03 20:06  Charles王志会  阅读(606)  评论(0)    收藏  举报