Как проложить три кнопки, текст влево и кнопку вправо?

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

попробовать с display: table-cell вместо от display: inline-block

см fiddle

Answer 2

Пожалуйста, удалите inline-block и замените его только inline. inline свойство div сделает текст центром альгина.

Код ниже должен работать нормально:

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

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/