CODEWITHSUNDEEP
htmlcssvertical-alignmentcenteringtext-align
Jesper Wilfing
Jesper Wilfing

Reputation: 11933

How to center text vertically and horizontally in between floated button elements?

I have a couple of buttons in a toolbar. They are floated to the left and right to give the middle-text 100% of the remaining width. Text could be one or two rows...

My problem is that I need to center the text and position it in the middle vertically.

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

I do have a fiddle as well (click a gray button to try it with dual row text): http://jsfiddle.net/U7LhL/6/

Any ideas? Setting line height wouldn't work (unless using JS) since height of the text is unknown and i need to fit 2 lines. Using absolute positioned text to achieve this would make it pretty messy I think, if even possible.

enter image description here

Upvotes: 1

Views: 1957

Answers (3)

Natalia
Natalia

Reputation: 386

With flex you can rearrange the elements visually by setting their order (order: 1, 2, 3) and stretch the title to fill in all the space left (flex:1 1 100%;).

The property align-items:center; does the trick and aligns all the items to the 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>

Upvotes: 3

Arshid KV
Arshid KV

Reputation: 10037

Just try as follows. Add class for title warp.

Html Code

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

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

You can make the text container display: 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

Upvotes: 3

Related Questions