What's the default css of a td which makes it so that stuff are automatically centered vertically?
I know how to get things to center horizontally given that a div is smaller than its parent with margin: 0 auto but what's allowing a td to center vertically automatically?
#outer {
width: 200px;
height: 200px;
background-color: yellow;
}
#inner {
width: 60%;
margin: auto;
background-color: red;
}
<div id="outer">
<div id="inner">
centered only horizontally
</div>
</div>
<table height=200 border=1>
<tr>
<td>
I center automatically
</td>
</tr>
</table>
The default css of td elements is display: table-cell. This property, will also accept vertical-align.
So, you might need to set the css:
td {
vertical-align: middle;
}
.outer {
display: table-cell;
vertical-align: middle;
width: 400px;
height: 200px;
border: 1px solid black;
}
.inner {
width: 60%;
margin: 0 auto;
background-color: yellow;
text-align: center;
}
<table height="200" border="1">
<tr>
<td>I am vertically centered</td>
</tr>
</table>
<div class="outer">
<div class="inner">
This is vertically centered
</div>
</div>
vertical-align: inherited;
for TD & TR in user agent stylesheet i.e default browser stylesheet. So TD is referring vertical-align of TBODY which is as below and thats causing it to align vertically in middle.
vertical-align: middle;
To override, default stylesheet you can do something like
td{
vertical-align: top !important ;
}
#outer{display:table-cell;}
#inner{vertical-align:middle;}
Related
I am trying to get a horizontal line to stretch between the first and last columns in a table but I need the first and last columns to wrap if the text is long. The only way I have found to get the desired effect is to use width:100%; on the middle column, and white-space:nowrap; on the first and last, but I need to find another way as I need the text to wrap when there isn't enough space. Is there a way to achieve this effect in plain CSS?
https://jsfiddle.net/macu/8axk5qv5/4/
table {
width: 100%;
}
td {
vertical-align: middle;
white-space: nowrap;
}
td:nth-child(2) {
width: 100%;
}
.line {
border-top: thin solid blue;
}
<table>
<tr>
<td>Title cell with a long title that should wrap</td>
<td><div class="line"></div></td>
<td>Another cell, should wrap</td>
</tr>
</table>
If the text is long enough there should be no line, and the text should wrap normally:
You can put a span or div in each cell, and make them to use white background, then set the line on the table row to create such layout visually.
Check out the fiddle demos below, so you can easily resize and see the wrapping text.
jsFiddle
.table {
width: 100%;
border-collapse: collapse;
}
.table tr {
background: linear-gradient(blue, blue) center/99.99% 1px no-repeat;
}
.table div {
background: white;
display: inline-block;
}
.middle div {
min-width: 100px; /*remove or adjust value as need*/
}
.last {
text-align: right;
}
<table class="table">
<tr>
<td class="first">
<div>Title cell with a long title that should wrap</div>
</td>
<td class="middle">
<div><!-- This td can be removed if no min-width needed --></div>
</td>
<td class="last">
<div>Another cell, should wrap</div>
</td>
</tr>
</table>
But using flexbox can make it much easier, if you don't have to use table.
jsFiddle
.container {
display: flex;
}
.line {
background: linear-gradient(blue, blue) center/1px 1px repeat-x;
flex: 1;
min-width: 100px; /*remove or adjust value as need*/
}
<div class="container">
<div>Title cell with a long title that should wrap</div>
<div class="line"></div>
<div>Another cell, should wrap</div>
</div>
try by removing the white-space: nowrap; on the TD tag, then target the first and the third TD with
td {
vertical-align: middle;
//white-space: nowrap;
}
td:nth-child(1),td:nth-child(3) {
//add whatever min-width AND max-width so it could be something like this
min-width:150px;
max-width:300px;
}
see if that helps.
I am trying to put two boxes (div) side to side, and I noticed they get misaligned when one contains text and the other is empty (in my case it contains )
HTML
<table>
<tr>
<td align="center">
<div id="tab2">1</div>
<div id="tab3"></div>
</td>
</tr>
</table>
CSS
#tab2, #tab3 {
width: 460px;
min-height: 300px;
display: inline-block;
border: #BCC6CC 2px solid;
}
Codepen link
Hello please use vertical-align: top; to make them align vertically in one line
#tab2, #tab3 {
width:460px;
min-height:300px;
display:inline-block;
border:#BCC6CC 2px solid;
vertical-align: top;
}
CODEPEN
Agree with #Szymon Dziewoński and also you can use this
#tab2, #tab3 {
width:460px;
min-height:300px;
display:inline-block;
border:#BCC6CC 2px solid;
float: left;
margin-left: 5px;
}
I'm trying to get away from using the table layout to do specific layouts. I know it's sloppy programming so I'm redoing it. I can't seem to recreate something like this using the div tag:
<table border=10 cellpadding=10 width="90%">
<tr>
<td align="center" width="143">
<img src="http://blah.com/images/133widepixelimage.jpg">
</td>
<td align="center">
Some text describing the image
</td>
</tr>
</table>
I've got the border, padding, width and alignment all done in a CSS file, and that works fine. But setting the width of the centered image still doesn't allow the centered text to show up to the right of the image. It still wraps to the next line. If I center the image left, and set float: left, that works. But not two centered even if the parent div is wide enough to accommodate.
Try this snippet:
.container{
margin-top: 30px;
width: 90%;
display: flex;
border: 10px solid black;
height: 50px;
border-left-color: gray;
border-top-color: gray;
}
.img{
width: 143px;
}
.img > img{
width: 100%;
}
.container > div {
vertical-align: middle;
line-height: 40px;
text-align: center;
margin: 1px;
border: 1px solid black;
display: inline-block;
}
.text{
flex: 1;
}
<div class="container">
<div class="img">
<img src="http://blah.com/images/133widepixelimage.jpg">
</div>
<div class="text">
Some text describing the image
</div>
</div>
You can do it with divs, using flexbox like the example showed above
How can I get three divs to look as they are shown below with only HTML and CSS? Is it possible to align them in a way that the bottom text will stay under the text which is the longest?
<html>
<div id=1>
Short text
Bottom text?
</div>
<div id=2>
Long text
Bottom text?
</div>
<div id=3>
Not so long text
Bottom text?
</div>
</html>
As #Ruddy pointed outThanks for that, I used Flexbox approach for this, with CSS Positioning, so am using display: flex; for the parent element, and wrapping the bottom text in a span, and than am positioning the span to bottom using position: absolute; also, you don't have to assign fixed height to the containers, as we are using display: flex;
Flex Demo
div.parent {
display: flex;
}
div.parent > div {
border: 4px solid #000;
width: 33%;
float: left;
position: relative;
padding-bottom: 30px; /* Make sure you tweak this, to the
highest height of your bottom content*/
}
div.parent > div > span {
position: absolute;
bottom: 0;left: 0;
}
Well, obviously you can use position: absolute; with bottom: 0; with padding-bottom: 30px;(approx) and wrap the bottom text in span and use position: relative; on the container element but again, you won't be able to stretch the other two containers which doesn't have height and thus it will fail.
So you need to use display: table-cell; with vertical-align: bottom;, it will keep pushing the text to the bottom which has content, also, vertical-align: bottom; will see to it that even the other containers text stick to the bottom
Demo
div.parent {
display: table;
}
div.parent > div {
border: 4px solid #000;
width: 33%;
display: table-cell;
vertical-align: bottom;
}
Yes, this is possible. But first: give the three a wrapper. Beside that, you can't use numbers as ID's.
Here you go: http://jsfiddle.net/SP68r/
<div class="wrapper">
<div id="first">
Short text
Bottom text?
</div>
<div id="second">
Long text
Long text
Long text
Long text
Long text
<div class="bottom">bottom text</div>
</div>
<div id="third">
Not so long text
</div>
</div>
The CSS
.wrapper { width: 350px; }
#first, #second, #third { float: left; width: 100px; }
#first { margin-right: 10px; }
#second { padding-bottom: 40px; margin-right: 40px; }
div.bottom { position: absolute; bottom: 0; }
<div id="1" style="border: 2px black solid; width: 120px;
height: 160px; position: relative;">
<div style="text-align: left;" id="1-1">
Not so long text
</div>
<div style="left: 17%;position: absolute; bottom:0px;" id="1-2">
Bottom text?
</div>
</div>
You can use position:absolute
DEMO
Simple Solution : Use a table.
<table border="1" width="100">
<tr valign="top">
<td>DIV 1</td>
<td>DIV 2<BR/>THIS IS A BIG, BIG, LONG PARAGRAPH, WHICH WILL GO DOWN THAN THE OTHER TWO CELLS.</td>
<td>DIV 3</td>
</tr>
<tr>
<td>BOTTOM TEXT</td>
<td>BOTTOM TEXT</td>
<td>BOTTOM TEXT</td>
</tr>
</table>
fiddle here.
I want to center (center+middle) an image, and the title inside h2, in a table column (td)
CSS
.centered
{
text-align:center;
}
HTML
<table class="table table-bordered">
<tbody>
<tr>
<td class="centered"><%= image_tag(prank.image_url, :size => "50x50") %></td>
<td class="centered"><h2><%=prank.category.titleize%></h2></td>
</tr>
I'm using Twitter Bootstrap
You could try:
.centered { vertical-align:middle; text-align:center; }
.centered img { display:block; margin:0 auto; }
check this out http://jsfiddle.net/k6Nvk/1/
just add in your <td> >> <td align="center" valign="middle"><image path></td>
and you can also do this using css check DEMO
Try
.centered{width: 50px; margin: 0px, auto, 0px, auto;}
All you have to do is declare margin from left and right (top and bottom optional):
.center {
margin-left: 25%;
margin-right: 25%;
}
Or you can just use
.center
{
margin-left: auto;
margin-right: auto;
width: 20%;
}
If you don't have to just don't use <table> tag. Use <div> instead.
Here is how I did it.
I call the base twitter css file.
than after i call my default css file
in my default file I have this class
.table-center th, .table-center td {
border-top: 1px solid #DDDDDD;
line-height: 18px;
padding: 8px;
text-align: center;
vertical-align: top;
}
then in my table i do this:
<table class="table table-center ....">...</table>
N.B. align="center" is not supported in HTML 5; see http://www.w3schools.com/tags/tag_td.asp
This should work
.cntr
{
margin: 0 auto;
}
<div class="cntr" style="width: 130px">
<img src="me.jpg" alt="me" style="width: 130px" />
</div>
Give this a try, but not 100% sure if it'll work:
.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
I would try text-align: center; in inline style="".