CSS中的table是一种常用的布局方式,但是在table中使用图片按钮时,可能会遇到图片无法居中显示的问题。接下来,我们将介绍如何使用CSS让按钮在table中居中显示图片。
/*CSS样式*/ td { text-align: center; /*使文字和图片都居中显示*/ } .btn { display: inline-block; /*使按钮成为行内元素*/ width: 100px; /*按钮宽度*/ height: 50px; /*按钮高度*/ background-image: url("btn.png"); /*设置按钮的背景图片*/ background-size: cover; /*使背景图片撑满按钮*/ color: #fff; /*文字颜色*/ font-size: 16px; /*文字大小*/ text-align: center; /*使文字居中显示*/ line-height: 50px; /*文字和图片垂直居中*/ }
我们先来看HTML部分:
上述代码创建了一个table,其中包含一个按钮。注意,按钮的class为“btn”,这是我们后面CSS样式所需的。
在CSS样式中,我们首先将table中的所有单元格(td)文本都居中显示,这样可以让按钮中的文字和图片都居中显示。接着,我们为按钮设置样式,让其成为一个行内元素(即同一行中其他元素也可以与之并列),并设置好按钮的宽高、背景图片、文字颜色等。最后,我们设置按钮中文字和图片在垂直方向上居中,这样可以让按钮看起来更美观。