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%); /* 兼容性不好 */ }
效果图
添加内容测试 效果图