This should be easy, but not for a beginner. Do I use a table or can I do this in CSS?
Problem: I have two or three lines of text(generated by php). Need to vertically align within a table box or div tag.
Image of what I want to accomplish
Sample of 2 lines of Text
Sample of 3 lines of Text
Thanks for your help. Learning can be rough for the new kids on the block.
Vertical centering can be pretty tricky with CSS. Here’s a way to do what you want (sort of), though it won’t work in all browsers:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style media="all">
.cont {border: 6px solid black; height: 100px; display: table; width: 800px; margin-bottom: 20px;}
.cont div {display: table-row;}
p {display: table-cell; vertical-align: middle; text-align: center;}
</style>
</head>
<body>
<div class="cont">
<div><p>A simple line of text</p></div>
<div><p>A simple line of text</p></div>
</div>
<div class="cont">
<div><p>A simple line of text</p></div>
<div><p>A simple line of text</p></div>
<div><p>A simple line of text</p></div>
</div>
</body>
</html>
For a more in-depth discussion and solution, see here:
Centering Inline Elements | Vertical Centering | HTML & CSS Workshop | Gary Turner Web Development
Thanks gary and ralph for the reply.
Ralph I have a question. In your example that will work for what I want to do. The only problem I see is the spacing between the paragraphs. If there are two lines the space between the lines is quite large.
I am feeding upto three lines, but the line need to look as if it were normal paragraph spacing. Would it be easier to put the three line in a <p> tag with <br> for each line? Or do you know another way to stop the huge space between the current paragraphs.
I think I got it. Yes, I can use <br/> between paragraphs.
<div class=“cont”>
<div><p>A simple line of text</p></div>
<div><p>A simple line of text</p></div>
<div><p>A simple line of text</p></div>
</div>
Instead I can do this:<div class=“cont”>
<div><p>
A simple line of text<br/>
A simple line of text<br>
A simple line of text
</p></div>
</div>
Does anyone see a problem with this change?
It sucks because dreamweaver does not show the changes correctly.
You can hard break the lines if you wish, or set the <p> width to some sane value and allow the lines to break naturally.
Nesting 2 divs and a p is likely overkill. If the inner div’s job is to hold a single p, then it is not needed as p is a container itself.
cheers,
gary
@cc4digital That line break solution seems like a good fix to me.
As an aside, I wouldn’t be using Dw design view, though. Stick to testing in browsers.
As for the extra divs, perhaps I don’t understand CSS table layout properly (no, not perhaps!) but I couldn’t get it to work with out a series of containers with
display: table
display: table-row
display: table-cell
At least the <br> method eliminates most of the divs.
You only need the table display container to supply an intrinsic size and position reference for the cell or cells. Elements with {display: table-cell;} do not have a margin property, and generally cannot be moved around.
Test case, strict
.test {
border: 1px solid black;
display: table;
height: 8em;
margin: 1.25em auto;
text-align: center;
width: 500px;
}
.test p,
.test span {
display: table-cell;
vertical-align: middle;
}
.test-cell {
border: 1px solid black;
display: table-cell;
height: 8em;
text-align: center;
vertical-align: middle;
width: 500px;
}
=======================
<div class="test">
<p>A simple line of text<br/>
A simple line of text<br>
A simple line of text
</p>
</div>
<p class="test"><span>A simple line of text<br/>
A simple line of text<br>
A simple line of text</span>
</p>
<p class="test-cell">A simple line of text<br/>
A simple line of text<br>
A simple line of text
</p>
Notice that Firefox fails to collapse the margins on {display: table;} elements.
cheers,
gary
The question I’ve been ending up asking lately is “and why should the box be a fixed height” – it’s one of the many “non-viable design choices” I keep seeing, and it’s really stupid. Just pad the box and let it shock change it’s size (what a concept) – if it can’t scale, there’s something horrendously wrong with your design concept. PERIOD…
because what about letting the fonts scale to the system metric? What about if suddenly you want four… or five… or six lines? Fixing the height of a container that has large amounts of dynamic content – that’s just idiotic… no matter what the “but I can do it in photoshop” nimrods who have no business “designing” layouts tell you.
Jason, look again. These boxes are in the table group so that stated heights are treated as minimums. If content grows, so will the box.
cheers,
gary
That makes even less sense.
Doesn’t a height in ems allow the box to grow? (Maybe not in proportion to the text exactly, but it gives room for movement. Perhaps it works differently with display: table, though. Not sure. (I just used px in my original example for testing porpoises. I pretty much never set heights on things in practice.)
See §17.5.3 Table height algorithms.
My article gave examples of content height exceeding the declared height of the container.
cheers,
gary
You’re not getting what I’m saying… I understand the mechanics of it. My question is, WHY WOULD YOU NEED A MIN HEIGHT IN THE FIRST PLACE.
Fixing the height or even a min-height that’s just the difference between one line or two – WHY? What purpose does that serve in a layout?
It just reeks of “but I can do it in photoshop” idiocy if it’s a fixed height, and “total waste of code” if it’s min-height because then you’re not fixing it’s height at all – is there something WRONG with it shinking height if it’s only one line?!?
Just pad it regardless of how many lines it has and be done with it. TOTAL WASTE OF TIME otherwise.
Your first, and second response did not indicate that.
My question is, WHY WOULD YOU NEED A MIN HEIGHT IN THE FIRST PLACE.
That’s a more lucid statement of meaning. The simple answer is, it’s a matter of presentation. CSS provides, as is usually the case, more than one way to skin a cat. Your padding solution is a method of centering, as is the use of leading (for a single line content). In the case of a min-height, imagine the author/designer wants to draw attention to the text using white space surrounding his text, but does not want the box to grow as content is added unless the content would overflow the box. The padding mechanism would grow the box with each additional line; undesirable in this case.
cheers,
gary
Sounds like a needless waste of valuable screen real-estate and bad design IMHO… especially if it’s inconsistent when there’s different amounts of content. Not something I would recommend doing on a design in the first place!
deathshadow60 is right here.
You need an out of the box mind for this.
Don’t use tables in the first place.
A design needs to live and be able to stretch.
If you really really need a fixed box with variable content, you can always use a scrollbar inside so you can keep your fixed box, but a scrollbar is not that pretty. That’s why stretchable boxes came in.
You can hard break the lines if you wish, or set the <p> width to some sane value and allow the lines to break naturally.