CODEWITHSUNDEEP
htmlcssvertical-alignment
F L
F L

Reputation: 498

How to center horizontal table-cell and content inside it in the middle

I am building on the question originally asked here How to center horizontal table-cell with a slight modification.

Basically, DIVs need to be centered as they are now, however, I also need to vertically align all the content in the cell in the middle.

Changing vertical-align: middle; for .column does NOTHING. If I change display: inline-block; for .column to display: table-cell, it will align content in the middle, but then .column DIVs are no longer centered and widths are all broken (currently all a evenly set to 25%). Setting margin:auto; or text-align on parent does nothing.

I've been running around this for days. Your help is appreciated.

/* Setting the container to be a table with maximum width and height */
#container {
	display: table;
	height: 100%;
	width: 100%;
}
/* All sections (container's children) should be table rows with minimal height */

.section {
	display: table-row;
	min-height: 1px;
}

/* We need one extra container, setting it to full width */
.columns-container {
	display: table-cell;
	height: 100%;
	width:100%;
	text-align: center;
}
/* Creating columns */
.column {
    display: inline-block; 
	vertical-align: middle;
	min-height: 150px;
	width: 25%;
	text-align: left;
}
#a {
	background-color: pink;
}
#b {
	background-color: lightgreen;
}
#c {
	background-color: lightblue;
}
<div id="container">
  <div class="section">
    <div class="columns-container">
      <div class="column" id="a"> Contents A </div>
      <div class="column" id="b"> Contents B </div>
      <div class="column" id="c"> Contents C </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 2259

Answers (2)

albert
albert

Reputation: 8153

setting your .column's line-height to the height of the element is step one; so: line-height:150px vertically aligns the content.
Then, simply edit the text-align:left style declaration you have set on .column to text-align:center finishes the vertically alignment in this case.
here's a fiddle:
http://jsfiddle.net/jalbertbowdenii/t2xgL3rm/

Upvotes: 0

Stickers
Stickers

Reputation: 78676

You could do it like the follows, it uses CSS3 Transforms, see the browser support details. And be aware of the white spaces thing on inline block.

JsFiddle demo

.container {
    text-align: center;
    margin: 0 auto;
}
.column {
    display: inline-block;
    width: 150px;
    height: 150px;
}
.column > div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#a { background-color: pink; }
#b { background-color: lightgreen; }
#c { background-color: lightblue; }
<div class="container">
    <div class="column" id="a"><div>Contents A</div></div>
    <div class="column" id="b"><div>Contents B</div></div>
    <div class="column" id="c"><div>Contents C</div></div>
</div>

Upvotes: 1

Related Questions