html列表的伸缩跟舒展,CSS按钮：按钮水平对齐和大小与舒展的文字大小

我试图做一个按钮，用左

，中间

(重复)和右

背景：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