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被拉伸，因此任何文本将适合（不宽度在我的例子手动设置到120像素）。

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

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

非常感谢你。

Answer 1

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

要解决的文字环绕&垂直居中在.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

您.middle和.button类中删除width并设置其display到inline-block。它会占用文本的宽度！

Answer 3

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

.horizo​​ntal {

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

height: 30px; 

}

。left { background-image：url（“http://i.stack.imgur.com/r5GpP.png”）; /边框：1px纯红色;/ height：30px; width：4px; padding-right：4px; }

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

.right { background-image：url（“http://i.stack.imgur.com/OAPLe.png”）; /边框：1px纯绿色;/ height：30px; width：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声明和图像txture的次要大庆石油管理局。

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

诺塔：这是我的发展方向之一的复制粘贴，所以如果你需要的细节，我会评论它。但是，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; 
}