Jump to content
wongadob

Vertical Centering Text Within A Div/span

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...