一、块元素中的<a>
标签居中对齐
HTML代码——块元素中的<a>
标签如:"<p><a href="#">文字</a></p>
"
可以给这个<p>
标签加上样式代码<p style="text-align: center"><a href="#">文字</a></p>
实现垂直居中对齐
代码示例:
<p style="text-align: center"><a href="http://www.w3cschool.cn">W3Cschool</a></p>
效果如下
二、单独的<a>
标签
如果这个<a>
标签是单独的话,就先把这个<a>
标签变成块元素然后添加一个宽度,再让它文字居中 <a href="#" style="display:inline-block; width:100px; text-align:center">文字</a>
例如代码示例
学技术从<a href="http://www.w3cschool.cn" style="display:inline-block; width:110px; text-align:center">w3cschool.cn</a>开始!
显示效果为
- 在行中居中:display:inline-block;
- 单独行居中: display:block
总结:
1、给对应的要居中的容器加上text-align:center;
属性就可以实现居中对齐了;
2、 html的<a>
标签display:block之后文字竖直居中,设置行高和<a>
标签的高度一样就能居中,使用line-height;