How to set the maximum height of CSS tables?
I'm trying to vertically center text in a div using the method outlined in this article : http://css-tricks.com/vertically-center-multi-lined-text/
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid black;
display: table;
}
.container p {
height: 60px;
max-height: 60px;
display: table-cell;
vertical-align: middle;
text-align: center;
}<div class="container">
<p>This is a lot of text. A really large amount of text, even. So much text here. And it just keeps going, oh my. Wow - so much text.</p>
</div>
<div class="container">
<p>Here's one line.</p>
</div>JSFiddle here : http://jsfiddle.net/Vc88w/2/
The div must not go bigger than the specified height of 60px, and any overflowing text should be hidden. The CSS table trick works fine when there is not enough text to make the div overflow, but when there is too much it forces the div to go larger than 60px (the first example), which is not what I want.
Is there a CSS rule besides height and max-height that lets me override the height of a CSS table? Alternatively, how else could I achieve the vertical centering while enforcing a maximum height of 60px on the container div?
css css-tables
edited Jan 1 at 18:47
Brian Tompsett - 汤莱恩
4,2331338101
asked Apr 27 '12 at 12:48
danbodanbo
176116
add a comment |
I'm trying to vertically center text in a div using the method outlined in this article : http://css-tricks.com/vertically-center-multi-lined-text/
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid black;
display: table;
}
.container p {
height: 60px;
max-height: 60px;
display: table-cell;
vertical-align: middle;
text-align: center;
}<div class="container">
<p>This is a lot of text. A really large amount of text, even. So much text here. And it just keeps going, oh my. Wow - so much text.</p>
</div>
<div class="container">
<p>Here's one line.</p>
</div>JSFiddle here : http://jsfiddle.net/Vc88w/2/
The div must not go bigger than the specified height of 60px, and any overflowing text should be hidden. The CSS table trick works fine when there is not enough text to make the div overflow, but when there is too much it forces the div to go larger than 60px (the first example), which is not what I want.
Is there a CSS rule besides height and max-height that lets me override the height of a CSS table? Alternatively, how else could I achieve the vertical centering while enforcing a maximum height of 60px on the container div?
css css-tables
edited Jan 1 at 18:47
Brian Tompsett - 汤莱恩
4,2331338101
asked Apr 27 '12 at 12:48
danbodanbo
176116
add a comment |
I'm trying to vertically center text in a div using the method outlined in this article : http://css-tricks.com/vertically-center-multi-lined-text/
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid black;
display: table;
}
.container p {
height: 60px;
max-height: 60px;
display: table-cell;
vertical-align: middle;
text-align: center;
}<div class="container">
<p>This is a lot of text. A really large amount of text, even. So much text here. And it just keeps going, oh my. Wow - so much text.</p>
</div>
<div class="container">
<p>Here's one line.</p>
</div>JSFiddle here : http://jsfiddle.net/Vc88w/2/
The div must not go bigger than the specified height of 60px, and any overflowing text should be hidden. The CSS table trick works fine when there is not enough text to make the div overflow, but when there is too much it forces the div to go larger than 60px (the first example), which is not what I want.
Is there a CSS rule besides height and max-height that lets me override the height of a CSS table? Alternatively, how else could I achieve the vertical centering while enforcing a maximum height of 60px on the container div?
css css-tables
edited Jan 1 at 18:47
Brian Tompsett - 汤莱恩
4,2331338101
asked Apr 27 '12 at 12:48
danbodanbo
176116
I'm trying to vertically center text in a div using the method outlined in this article : http://css-tricks.com/vertically-center-multi-lined-text/
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid black;
display: table;
}
.container p {
height: 60px;
max-height: 60px;
display: table-cell;
vertical-align: middle;
text-align: center;
}<div class="container">
<p>This is a lot of text. A really large amount of text, even. So much text here. And it just keeps going, oh my. Wow - so much text.</p>
</div>
<div class="container">
<p>Here's one line.</p>
</div>JSFiddle here : http://jsfiddle.net/Vc88w/2/
The div must not go bigger than the specified height of 60px, and any overflowing text should be hidden. The CSS table trick works fine when there is not enough text to make the div overflow, but when there is too much it forces the div to go larger than 60px (the first example), which is not what I want.
Is there a CSS rule besides height and max-height that lets me override the height of a CSS table? Alternatively, how else could I achieve the vertical centering while enforcing a maximum height of 60px on the container div?
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid black;
display: table;
}
.container p {
height: 60px;
max-height: 60px;
display: table-cell;
vertical-align: middle;
text-align: center;
}<div class="container">
<p>This is a lot of text. A really large amount of text, even. So much text here. And it just keeps going, oh my. Wow - so much text.</p>
</div>
<div class="container">
<p>Here's one line.</p>
</div>.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid black;
display: table;
}
.container p {
height: 60px;
max-height: 60px;
display: table-cell;
vertical-align: middle;
text-align: center;
}<div class="container">
<p>This is a lot of text. A really large amount of text, even. So much text here. And it just keeps going, oh my. Wow - so much text.</p>
</div>
<div class="container">
<p>Here's one line.</p>
</div>css css-tables
css css-tables
edited Jan 1 at 18:47
Brian Tompsett - 汤莱恩
4,2331338101
asked Apr 27 '12 at 12:48
danbodanbo
176116
edited Jan 1 at 18:47
Brian Tompsett - 汤莱恩
4,2331338101
asked Apr 27 '12 at 12:48
danbodanbo
176116
edited Jan 1 at 18:47
Brian Tompsett - 汤莱恩
4,2331338101
edited Jan 1 at 18:47
Brian Tompsett - 汤莱恩
4,2331338101
edited Jan 1 at 18:47
Brian Tompsett - 汤莱恩
4,2331338101
4,2331338101
asked Apr 27 '12 at 12:48
danbodanbo
176116
asked Apr 27 '12 at 12:48
danbodanbo
176116
asked Apr 27 '12 at 12:48
danbodanbo
176116
176116
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
yes you must change in ".container" the "display:table" with a "display:block"
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid #000;
overflow: hidden;
display: block;
}
answered Apr 27 '12 at 13:08
MCSIMCSI
2,3151832
Looks like this works fine! Thanks
– danbo
Apr 27 '12 at 13:16
Great @danny!!! you're welcome
– MCSI
Apr 27 '12 at 13:30
Late reply, but this then destroys the "text-align:center;" on the p tag.
– Jamie Taylor
Jan 16 '15 at 11:37
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f10350895%2fhow-to-set-the-maximum-height-of-css-tables%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
yes you must change in ".container" the "display:table" with a "display:block"
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid #000;
overflow: hidden;
display: block;
}
answered Apr 27 '12 at 13:08
MCSIMCSI
2,3151832
Looks like this works fine! Thanks
– danbo
Apr 27 '12 at 13:16
Great @danny!!! you're welcome
– MCSI
Apr 27 '12 at 13:30
Late reply, but this then destroys the "text-align:center;" on the p tag.
– Jamie Taylor
Jan 16 '15 at 11:37
add a comment |
yes you must change in ".container" the "display:table" with a "display:block"
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid #000;
overflow: hidden;
display: block;
}
answered Apr 27 '12 at 13:08
MCSIMCSI
2,3151832
Looks like this works fine! Thanks
– danbo
Apr 27 '12 at 13:16
Great @danny!!! you're welcome
– MCSI
Apr 27 '12 at 13:30
Late reply, but this then destroys the "text-align:center;" on the p tag.
– Jamie Taylor
Jan 16 '15 at 11:37
add a comment |
yes you must change in ".container" the "display:table" with a "display:block"
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid #000;
overflow: hidden;
display: block;
}
answered Apr 27 '12 at 13:08
MCSIMCSI
2,3151832
yes you must change in ".container" the "display:table" with a "display:block"
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid #000;
overflow: hidden;
display: block;
}
answered Apr 27 '12 at 13:08
MCSIMCSI
2,3151832
answered Apr 27 '12 at 13:08
MCSIMCSI
2,3151832
answered Apr 27 '12 at 13:08
MCSIMCSI
2,3151832
answered Apr 27 '12 at 13:08
MCSIMCSI
2,3151832
2,3151832
Looks like this works fine! Thanks
– danbo
Apr 27 '12 at 13:16
Great @danny!!! you're welcome
– MCSI
Apr 27 '12 at 13:30
Late reply, but this then destroys the "text-align:center;" on the p tag.
– Jamie Taylor
Jan 16 '15 at 11:37
add a comment |
Looks like this works fine! Thanks
– danbo
Apr 27 '12 at 13:16
Great @danny!!! you're welcome
– MCSI
Apr 27 '12 at 13:30
Late reply, but this then destroys the "text-align:center;" on the p tag.
– Jamie Taylor
Jan 16 '15 at 11:37
Looks like this works fine! Thanks
– danbo
Apr 27 '12 at 13:16
Looks like this works fine! Thanks
– danbo
Apr 27 '12 at 13:16
Great @danny!!! you're welcome
– MCSI
Apr 27 '12 at 13:30
Great @danny!!! you're welcome
– MCSI
Apr 27 '12 at 13:30
Late reply, but this then destroys the "text-align:center;" on the p tag.
– Jamie Taylor
Jan 16 '15 at 11:37
Late reply, but this then destroys the "text-align:center;" on the p tag.
– Jamie Taylor
Jan 16 '15 at 11:37
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f10350895%2fhow-to-set-the-maximum-height-of-css-tables%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
