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

Question

我在工具栏中有几个按钮。它们向左和向右浮动，使中间文本保持100％的剩余宽度。文字可以是一行或两行......

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

MARKUP

<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行。

。使用绝对定位的文本来实现这一点会让我觉得它非常混乱。

提前致谢/ Jesper

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;诀窍并将所有项目对齐到中心。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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;
}