Question

我尝试了一些不同的想法。首先，我将三个按钮向左浮动，向右浮动一个按钮。我还为文本添加了以下内容。但文字没有对齐。

<div style="
    display: inline-block;
    height: 40px;
    vertical-align: middle;
">194 rows retrieved - 194 displayed</div>

当我看到DIV时，里面的文字仍然在顶部。有人可以解释我如何让文本在中间位置，以便在文本的上方和下方有相同的空间吗？

我真正需要的是一些方法：

 button  button  button  sometexthere                                           button

这是我创建的小提琴http://jsfiddle.net/M4xTe/这个问题是我希望按钮和文本在左侧分组，而另一个按钮在右侧浮动。目前它们都是平等的。

Answer 1

请删除inline-block并仅使用inline进行替换。 div的inline属性将使文本algin居中。

以下代码应该可以正常工作：

<button>hello</button> <button>world</button> <div style=" display: inline; height: 40px; text-align:center; ">194 rows retrieved - 194 displayed</div>

Answer 2

使用display: table-cell代替display: inline-block

进行尝试

请参阅fiddle

Answer 3

Demo for this

.div{
height: 40px;
display:inline-block;
padding:10px 10px;
list-style:none;
}



<div class="div">number 1</div>
<div class="div">number 2</div>
<div class="div">number 3</div>

Answer 4

只需使用两个左/右浮动的容器。

<div>
    <div class="leftGroup">
        <button>Left 1</button>
        <button>Left 2</button>
        <button>Left 3</button>
        <span>Some text</span>
    </div>
    <div class="rightGroup">
        <button>Right</button>
    </div>
</div>

和CSS：

.leftGroup {
    float: left;
}

.rightGroup {
    float: right;
}

http://jsfiddle.net/8sTWy/

如何将三个按钮，左侧文本和右侧按钮分开？

4 个答案: