Question

我正在尝试制作一个左侧 enter image description here ，中间（重复）和右侧背景的按钮：

<div class="horizontal">
    <div class="myButton">
        <div class="left" ></div>
        <div class="middle" >
            some text
        </div>
        <div class="right" ></div>
    </div>
</div>

我的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块（页面）的中间对齐。

enter image description here

要拉伸的middle以便任何文字适合（在我的示例中没有手动将宽度设置为120px）。

enter image description here

我不知道如何做到这一点。

这是一个小提琴：http://jsfiddle.net/kCBpw/3/，

非常感谢你。

Answer 1

这是您更新过的小提琴：http://jsfiddle.net/stevenschobert/fNdrT/

修复文字包装＆amp;在.middle课程中进行垂直居中，添加line-height:30px和min-width:50px;

.middle {
    min-width: 50px;
    line-height:30px;
    /* rest of styles ... */
}

对于水平对齐，您可以向text-align:center;课程添加.horizontal，然后向margin:auto;添加.myButton。

.horizontal {
    width: 100%;
    text-align:center;
}

.myButton {
    margin:auto auto;
    /* cont... */
}

Answer 2

删除width和.middle课程中的.button，并将display设置为inline-block。它将占用文本的宽度！

Answer 3

你的问题是你需要取下你的中间和我的按钮的所有宽度。然后，一旦你做了那个放一个浮动：留在我的按钮和你的解决方案。 !!!改变了我的小提琴！ http://jsfiddle.net/cornelas/kCBpw/6/

.horizontal {

} .myButton div { 显示：内联; padding-bottom：11px; } .myButton {

 height: 30px;

}

.left { background-image：url（“http://i.stack.imgur.com/r5GpP.png”）; / border：1px solid red; / 身高：30px; 宽度：4px; padding-right：4px; }

.middle { background-image：url（“http://i.stack.imgur.com/yXPkE.png”）; / * border：1px纯黄色; * / 身高：30px; padding-left：5px; padding-right：5px; text-align：center; }

.right { background-image：url（“http://i.stack.imgur.com/OAPLe.png”）; / border：1px solid green; / 身高：30px; 宽度：4px; padding-right：4px; }

Answer 4

您应该仅使用2个容器而不是3来缩小按钮结构。将一侧与“中间”合并将减少图像数量（如果使用mouseOver）..以及html标记。

HTML

<div class="myButton">
    <div class="myButton-inner" >
        some text
    </div>
</div>

CSS

.myButton {
    background: url("../images/btn-left-small-texture.png") no-repeat scroll left top transparent;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-family: helvetica,sans-serif;
    font-size: 16px !important;
    font-weight: 700 !important;
    height: 28px;
    line-height: 28px;
    padding-left: 10px;
    text-shadow: 1px 1px 2px #9F730C;
}

.myButton-inner {
    background: url("../images/right-big-texture-merging-middle.png") no-repeat scroll right top transparent;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding-left: 5px;
    padding-right: 40px;
}

通过这种方式，您只需1个.css声明即可管理'over'效果，并可轻微调整图像效果。

.myButton:hover,.myButton-inner:hover {
    background-position: 0 fit-for-your-image-px;
}

Nota：这是我开发之一的复制粘贴，所以如果您需要详细信息，我会为您发表评论。但是，CSS说明了一切。

Answer 5

我必须这样做，here's a pure CSS button使用这种风格，只需调整颜色看起来更像你的例子：

<强> HTML

<a class="button" href="">Lorem ipsum dolor.</a>

<强> CSS

.button {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px;
    position: relative;
    border: 1px solid chocolate;
    color: black;
    background: linear-gradient(to right, chocolate 0, beige 1px, beige 3px, chocolate 3px) repeat;
    background-size: 4px;
    box-shadow: inset 0 0 3px white;
}

.button:before,
.button:after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 50%;
    margin-top: -5px;
}

.button:before {
    left: -5px;
    border-right: 1px solid chocolate;
}

.button:after {
    right: -5px;
    border-left: 1px solid chocolate;
}

css按钮：按钮水平对齐和大小拉伸与文本大小

5 个答案: