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

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

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

现在我需要的是：

• 代码> MyButoX将在<代码>中的水平对齐<横断/代码>块（页）。

• 中间的

  要拉伸，以便任何文本都能容纳（在我的示例中，没有手动将宽度设置为120px）

我不知道怎么做

这是一把小提琴：

---

非常感谢。

删除

类中
和
按钮上的
宽度
，并将其
显示设置为
内联块
。它将占用文本的宽度
 删除
类中的
宽度
和
按钮
并将其
显示设置为
内联块
。它将占用文本的宽度
 这是您最新的小提琴：

要在
.middle
类中固定文本环绕和垂直居中，请添加
行高：30px
和
最小宽度：50px

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

对于水平对齐，可以添加
文本对齐：居中到你的
。水平
类，然后是
边距：自动
到您的
.myButton

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

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

这是您最新的小提琴：

要在
.middle
类中固定文本环绕和垂直居中，请添加
行高：30px
和
最小宽度：50px

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

对于水平对齐，可以添加
文本对齐：居中到你的
。水平
类，然后是
边距：自动
到您的
.myButton

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

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

你的问题是你需要把你的mid和mybutton的所有宽度都去掉。然后，一旦你做了，在mybutton和你的解决方案上放一个float:left。
!!!换了我的小提琴！！！

.水平{

}
.myButton分区{
显示：内联；
填充底部：11px；
}
.我的按钮{

 height: 30px;

}

.左{
背景图片：url（“”）；
/边框：1px纯红/
高度：30px；
宽度：4px；
右侧填充：4px；
}

.中{
背景图片：url（“”）；
/*边框：1px纯黄色*/
高度：30px；
左侧填充：5px；
右侧填充：5px；
文本对齐：居中；
}

.对{
背景图片：url（“”）；
/边框：1px纯绿色/
高度：30px；
宽度：4px；
右侧填充：4px；
}
您的问题是需要将mid和My按钮的所有宽度都去掉。然后，一旦你做了，在mybutton和你的解决方案上放一个float:left。
!!!换了我的小提琴！！！

.水平{

}
.myButton分区{
显示：内联；
填充底部：11px；
}
.我的按钮{

 height: 30px;

}

.左{
背景图片：url（“”）；
/边框：1px纯红/
高度：30px；
宽度：4px；
右侧填充：4px；
}

.中{
背景图片：url（“”）；
/*边框：1px纯黄色*/
高度：30px；
左侧填充：5px；
右侧填充：5px；
文本对齐：居中；
}

.对{
背景图片：url（“”）；
/边框：1px纯绿色/
高度：30px；
宽度：4px；
右侧填充：4px；
}
您应该只使用2个容器而不是3个容器来缩小按钮结构。将一侧与“中间”合并将减少图像数量（如果使用鼠标悬停）。。还有html标记

HTML

通过这种方式，您只需1.css声明和对图像结构的轻微调整，就可以管理“over”效果

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

注：这是我的一个开发项目的复制粘贴，所以如果您需要详细信息，我会为您评论。但是，CSS本身就说明了问题。
您应该只使用2个容器而不是3个容器来缩小按钮结构。将一侧与“中间”合并将减少图像数量（如果使用鼠标悬停）。。还有html标记

HTML

通过这种方式，您只需1.css声明和对图像结构的轻微调整，就可以管理“over”效果

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

注：这是我的一个开发项目的复制粘贴，所以如果您需要详细信息，我会为您评论。但是，CSS本身就说明了问题。
我必须这样做，使用这种样式，只需调整颜色，使其看起来更像您的示例：

HTML

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

我只需要这样做，使用这种样式，只需调整颜色，使其看起来更像您的示例：

HTML

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

将
宽度：100px
从你的中产阶级中去掉，添加
背景重复：重复-x。同时去掉
宽度：120px
在
中.myButton
谢谢，页面中间整件东西对齐的问题如何？只需设置一个与高度值相同的行高度。好的，我会尝试一下，谢谢你应该只使用2个容器而不是3个容器来缩小按钮结构。将一侧与“中间”合并将减少图像数量（如果使用鼠标悬停）。。html语法将
width:100px
从中产阶级中去掉，并添加
background repeat:repeat-x。同时去掉
宽度：120px
在
中.myButton
谢谢，页面中间整件东西对齐的问题如何？只需设置一个与高度值相同的行高度。好的，我会尝试一下，谢谢你应该只使用2个容器而不是3个容器来缩小按钮结构。将一侧与“中间”合并将减少图像数量（如果使用鼠标悬停）。。html语法感谢你的拉伸，水平对齐怎么样？垂直对齐的最简单方法是使用
行高：30px.middle
课堂上使用code>代替
身高：30px我错读了“水平对齐”到“垂直”，但由于按钮将获得准确的宽度，它将始终居中。如果需要，可以添加
填充