如何在浮动按钮元素之间垂直和水平居中文本？

Question

我在工具栏中有几个按钮。它们左右浮动，为中间文本提供 100% 的剩余宽度。文本可以是一两行...

我的问题是我需要将文本居中并垂直放置在中间。

标记

<div class="toolbar">
<div class="button left">&nbsp;</div>
<div class="button left">&nbsp;</div>
<div class="button left">&nbsp;</div>
<div class="button right">&nbsp;</div>
<div class="button right">&nbsp;</div>
<span class="title">Start page title</span>
</div>

CSS

.left{
    float: left;
}
.right{
    float: right;
}
.toolbar{
    height: 70px;
    width: 500px;
    border: 1px solid red;
}
.button{
    width: 68px;
    height: 68px;
    border: 1px solid #fff;
    background: #666666;
}
.title{
    font-size: 12px;   
    line-height: 8px;
    vertical-align: middle;
    text-align: center;
}

我也有一个小提琴（单击灰色按钮以尝试使用双行文本）： http://jsfiddle.net/U7LhL/6/

有什么想法吗？设置行高不起作用（除非使用 JS），因为文本的高度是未知的，我需要适合 2 行。如果可能的话，我认为使用绝对定位文本来实现这一点会变得非常混乱。

Answer 1

可以让文本容器显示：table-cell。

body {
    background: pink;
}
.toolbar {
    display: table;
    height: 70px;
    width: 500px;
    border: 1px solid red;
}
.button {
    border: 1px solid #fff;
    width: 68px;
    height: 68px;
    background: #4679bd url(../img/logo.png) no-repeat -6% 50%;
}
.toolbar > div {
    display: table-cell;
}
.title {
    font-size: 12px;
    line-height: 8px;
    vertical-align: middle;
    text-align: center;
}
.center {
    vertical-align: middle;
    text-align: center;
}

Working Fiddle

Answer 2

使用 flex，您可以通过设置元素的顺序（顺序：1、2、3）直观地重新排列元素，并拉伸标题以填充剩余的所有空间（flex:1 1 100%;）。

属性 align-items:center;做到这一点并将所有项目对齐到中心。

.toolbar{
  display:flex;
  flex-flow:row nowrap;
  align-items:center;
  border:1px solid red;
}
.button{
  padding:1rem;
  border:1px solid #ccc;
}
.left{
  order:1;
}
.right{
  order:3;
}
.title{
  text-align:center;
  padding:1rem;
  order:2;
  flex:1 1 100%;
  background:beige;
}

<div class="toolbar">
  <div class="button left">Button</div>
  <div class="button left">Button</div>
  <div class="button left">Button</div>
  <div class="button right">Button</div>
  <div class="button right">Button</div>
  <span class="title">Start page title</span>
</div>

Answer 3

请尝试如下。为标题扭曲添加类。

HTML 代码

    <div class="toolbar">
<div class="button left">&nbsp;</div>
<div class="button left">&nbsp;</div>
<div class="button left">&nbsp;</div>
<div class="button right">&nbsp;</div>
<div class="button right">&nbsp;</div> <div class="titleWarp"> <span class="title">Start page title</span></div>
</div>

CSS

 body{
    background: pink;
}
.left{
    float: left;
}
.right{
    float: right;
}
.toolbar{
    display: inline-block;
    height: 70px;
    width: 500px;
    border: 1px solid red;
}
.button{
    width: 68px;
    height: 68px;
    border: 1px solid #fff;
    background: #4679bd url(../img/logo.png) no-repeat -6% 50%;
}
#title{
width: 75%;
margin:0px auto;
}
.titleWarp{
    font-size: 12px;   
    line-height: 8px;
    vertical-align: middle;
    text-align: center;
}