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

Question

我正在尝试制作一个具有左、中（重复）和右 背景的按钮：

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

• 并且middle要拉伸，以便任何文本都适合（在我的示例中无需手动将宽度设置为 120px）。

我不知道该怎么做。

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

非常感谢您。

Answer 1

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

要修复类中的文本环绕和垂直居中，请.middle添加 aline-height:30px和 a min-width:50px;

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

对于水平对齐，您可以将 a 添加text-align:center;到您的.horizontal班级，然后将 a添加margin:auto;到您的.myButton.

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

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

Answer 2

You should minify your button structure using only 2 containers instead of 3. Merging one side with 'middle' this will reduce images numbers (if you use mouseOver) .. and the html markups.

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;
}

This way you're able to manage 'over' effect with just 1 .css declaration and a minor ajustment of your image txture.

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

Nota: this is a copy-paste of one of my development, so if you need details, i will comment it for you. But, CSS speaks for itself.

Answer 3

删除width你.middle和.button类上的 并将它们设置display为inline-block。它将占用文本的宽度！

Answer 4

你的问题是你需要去掉你的 mid 和 mybutton 的所有宽度。然后，一旦你完成了，就在 mybutton 和你的解决方案上放一个 float:left。!!!改变了我的小提琴!!! http://jsfiddle.net/cornelas/kCBpw/6/

。水平的 {

} .myButton div { 显示：内联；底部填充：11px；} .myButton {

 height: 30px;

}

.left { background-image: url(" http://i.stack.imgur.com/r5GpP.png "); /边框：1px纯红色；/ 高度：30px；宽度：4px；padding-right: 4px; }

.middle { background-image: url(" http://i.stack.imgur.com/yXPkE.png "); /* 边框：1px 纯黄色；*/ 高度：30px；左填充：5px；padding-right: 5px; 文本对齐：居中；}

.right { background-image: url(" http://i.stack.imgur.com/OAPLe.png "); /边框：1px纯绿色；/ 高度：30px；宽度：4px；padding-right: 4px; }

Answer 5

我只需要这样做，这是一个具有这种样式的纯 CSS 按钮，只需调整颜色以使其看起来更像您的示例：

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;
}