为了账号安全,请及时绑定邮箱和手机立即绑定

内联块级元素

<style type="text/css">

a{

    display:inline-block;

width:20px;/*在默认情况下宽度不起作用*/

height:20px;/*在默认情况下高度不起作用*/

background:pink;/*设置背景颜色为粉色*/

text-align:center; /*设置文本居中显示*/

}

</style>


<a>1</a>

<a>2</a>

<a>3</a>

<a>4</a>

把<a>标签设置为内联块级元素之后,把width和height设置为50px之后,text-align:center 只是在X轴方向居中了,Y轴没有,怎么让文本在Y轴方向也对准呢?

正在回答

4 回答

垂直居中:分为单行和多行。单行直接利用height和line-height。多行:方法一:使用插入 table  (包括tbody、tr、td)标签,同时设置 vertical-align:middle。

<style>

  .wrap{height:300px;}

</style>

<body><table><tbody><tr><td class="wrap"><div>

   <a>1</a> <a>2</a> <a>3</a><a>4</a>
</div></td></tr></tbody></table></body>

你还可以直接跳到15-7章看详解

0 回复 有任何疑惑可以回复我~

在<a>标签的css代码再加入line-height:50px;即可实现,学到后面就知道了

0 回复 有任何疑惑可以回复我~

魔人已经垂直居中了吧

0 回复 有任何疑惑可以回复我~

a是内联元素??

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1225288    人
  • 解答问题       18230    个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

内联块级元素

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信