Question

我正在尝试并排获得两个<button>，以便在它们之间有一个绝对定位的（？）标签。

请参阅ASCII art以获取说明

_________Click_either_________ |___BTN1_____|O R|______BTN2__|

BTN都需要width:50%，所以OR标签需要绝对定位，据我所知，否则它不适合。
问题是我不知道如何将标签居中，而没有为其定义高度和宽度。我希望它缩小到它的内容大小。为了澄清，标签需要垂直和水平居中。

任何元素都没有定义的高度。

JSFiddle：http://jsfiddle.net/5awNx/1/

Answer 1

您可以使用float定位按钮，使用position: absolute;定位提示。我还添加了一些语义html（实际上并不是很好）。看看我为你创建的这个小提琴：http://jsfiddle.net/m2X5f/

编辑：这是一个带有垂直居中提示的更新版本（但只有固定高度）：http://jsfiddle.net/m2X5f/2/

Answer 2

我认为你的意思是这样的： JSFiddle Example

<table>
    <tr>
        <td id="b1"><button>Left Button</button></td>
        <td id="txt">Hello</td>
        <td id="b2"><button>Right Button</button></td>
    </tr>
</table>

Answer 3

这是对JSFiddle的更新（使用CSS3）：http://jsfiddle.net/5awNx/4/

#label
{
    width:100%;
    position: absolute;
    text-align:center;
    top:50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);

}

两个按钮彼此相邻，两者之间有跨度

3 个答案: