Vertical Centering Text Within A Div/span

[wongadob]

Yes I have read through pretty much everything I can find on vertical centering, but none of the comments seem relevant to my particular issue. I have a page that will partially be generated with php. But it contains a big table of information. So I have so far tried to create the header for this table. But I am having a problem with vertical centering. I need to resolve this problem as the data that will populate the table is of varying lengths. i.e. the rows can have data that will create multiple lines of text. I have read solutions people have discussed on one line of text, but even some of the headers wrap to two lines. My code is currently as follows (partial code)

  <div id = "columnnames">   <h2>    Compliancy rate is 125%   </h2>   <br/>     <div class = "tmainviewtable">		 <span class = "tloc">Location</span>		 <span class = "tsite">Site</span>		 <span class = "tbusunit">Business Unit</span>		 <span class = "titem">Compliance Item</span>  		 <span class = "taction">Action Required</span>  		 <span class = "tspecial">Specialist</span>  		 <span class = "tFM">FM</span>  		 <span class = "tcompliant">Compliant ?</span>  		 <span class = "tdatecomp">Date Complete</span>  		 <span class = "tdatereview">Date of Next Review</span>  		 <span class = "tfreq">Frequency</span>  		 <span class = "tremedial">Remedial Actions</span>  		 <span class = "tcnw">Concerns & Warnings</span>  		 <span class = "tcomments">Comments</span>  		 <span class = "tinforce">Document In Force</span>  		 <span class = "tlastchange">Last Change</span>  		 <span class = "tnotes">Notes</span>  	  </div>  </div>

I have the following items in my CSS file for formatting

#columnnames {  border: 0px;   /* 1px Red solid; */  background-color: #FFFFFF;  margin: 0px;  width: 150em;  min-width: 1024px;  max-width: 150em;  clear: both;} .tmainviewtable {	   background-color: #CCCCFF;	    font-size: medium;	    height: 3em;	    text-align: center;	    border-bottom: 1px white solid;	  }	 .tloc {	    float: left;	    clear: left;	    width: 8em;	    height: 3em;	    line-height; 3em;	    vertical-align: middle;	    border-left: 1px white solid;	  }	 .tsite{	    float: left;	    width: 8em;	    height: 3em;	   border-left: 1px white solid;	  }

There may be some repitition in there at the moment as I have been experimenting with all sorts. What I want is the text in each cell to be both vertically and horizontally centered (or on the main table of data that may well be left aligned and vertically centered (But that is the next step:) ) Any help much appreciated

[Ingolme]

When you want to vertically center multiple lines, put the text into an inline block then pretend that the inline-block was a single line of text. Just to prevent an extra bit of space below, add vertical-align: middle to the block.

<div class="container"><div class="vertical">Multi-line <br> text</div></div>

.container {  height: 200px;  line-height: 200px;}.vertical {  display: inline-block;  vertical-align: middle;}

[dsonesuk]

surely that will cause the text 'text' will end outside the .container element because of line-height: 200px; EDIT: IF, it is showing as tabular data, the better option would be to use a table instead, that is what it is for. Tables for tabular data only. div for page layout only.

[Ingolme]

That's true. I forgot to add "line-height: normal" to the CSS of the inline block:

.vertical {  line-height: normal;  display: inline-block;  vertical-align: middle;}

If the data is tabular (divided in rows and columns), then a table is the only thing you should use.

[wongadob]

Maybe I should convert to a table then. Thanks!