我试图做一个按钮,用左
,中间
(重复)和右
背景:CSS按钮:按钮水平对齐和大小与舒展的文字大小
some text
我的CSS如下:
.horizontal {
width: 100%;
}
.myButton {
width: 120px;
height: 30px;
}
.left {
background-image: url("http://i.stack.imgur.com/r5GpP.png");
/*border: 1px solid red;*/
float: left;
height: 30px;
width: 4px;
}
.middle {
background-image: url("http://i.stack.imgur.com/yXPkE.png");
/* border: 1px solid yellow;*/
float: left;
height: 30px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
width: 100px;
}
.right {
background-image: url("http://i.stack.imgur.com/OAPLe.png");
/*border: 1px solid green;*/
float: left;
height: 30px;
width: 4px;
}
现在我需要的是:
myButton在horizontal块(页面)的中间对齐。
而middle被拉伸,因此任何文本将适合(不宽度在我的例子手动设置到120像素)。
我不知道如何做到这一点。
非常感谢你。
+0
将'width:100px'带出您的中间课程并添加'background-repeat:repeat-x;'for它。同样在'.myButton'中摆脱'width:120px;' –
2013-05-08 15:20:18
+0
谢谢,如何在页面中间对齐整个事物? –
2013-05-08 15:29:18
+0
只需使用与高度相同的值设置线条高度即可。 –
2013-05-08 15:32:09