Well, this worked as expected:
<td style="vertical-align: middle; text-align: center">some text</td>
(the text comes out vertically and horizontally centered), so being a nice guy I moved over the style part into a CSS like so:
HTML:
<td class="allcenter">some text</td>
CSS:
.allcenter {
vertical-align: middle;
text-align: center;
}
and you know what, it only gets horizontally centered.
What gives?
HTML
<table>
<tr>
<td class="allcenter">some text</td>
</tr>
</table>
CSS
td {
border:1px solid black;
padding : 10px;
height:100px;
width:100px;
}
.allcenter {
vertical-align: middle;
text-align: center;
}
Working Fiddle
Related
I can't figure out why this text won't align with the bottom of the image:
Here is the example snippet:
img {
height: 80px;
width: auto
}
.spacer {
width: 30px;
}
h1 {
vertical-align: bottom;
}
<table>
<tr>
<td><img src="https://unsplash.it/80" /></td>
<td class="spacer"></td>
<td>
<h1><b>KCFishFans.com</b></h1>
</td>
</tr>
</table>
h1 has margins by default. You can remove these in your CSS.
table h1 {
margin: 0;
}
<table>
<tr>
<td><img src="https://unsplash.it/80" style="height:80px; width:auto" /></td>
<td style="width:30px"></td>
<td style="vertical-align:bottom">
<h1><b>KCFishFans.com</b></h1>
</td>
</tr>
</table>
Here is my alternative solution for the layout and the space between the elements:
I would solve it with flexbox and a wrapper. For the space between the img and h1 I would use padding-left in case of an empty td with a width. The advantage of this solution is, it is 100% aligned to the bottom of the img. With tables it isn't aligned 100% with the bottom of the image (I think because of the default line-height for the h1).
Here you have a complete guide for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope this helps.
.wrapper {
display: flex;
align-items: baseline;
}
.wrapper__image {
height: 80px;
width: auto
}
.wrapper__title {
padding-left: 30px;
}
<div class="wrapper">
<img class="wrapper__image" src="https://unsplash.it/80">
<h1 class="wrapper__title">KCFishFans.com</h1>
</div>
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;}
I'm trying to get my text to align with the top of the image in the cell beside it. Vertical-align top doesn't seem to be working? I think currently it's trying to center itself relative to the other cell. Maybe there's a better way to do this with floats or something?
Here's the CSS:
table#body1 {
padding: 0px;
vertical-align: top;
margin-bottom: 10px;
margin-top: 5px;
}
td#images {
width: 30%;
}
td#text {
width: 70%;
padding-left: 15px;
text-align: justify;
vertical-align: top;
}
And the HTML: (all the divs are inline-block elements if that makes a difference)
<table id="body1">
<tr>
<td id="images"><img class="halfimg1" src="titania2.jpg" alt="Queen Titania"><br></td>
<td id="text">
<div id="header">Wander in these woods.</div><br>
This is some Text.<br>
<div id="caption"><br>This is my caption.</div>
</td>
</tr>
</table>
Thanks in advance for helping!
Add vertical-align: top; to td#images as well.
Keeping in mind the comment I made above, you probably want to move the vertical-align: top; rule from td#text to td#images
jsFiddle example
I'm trying to figure out how to CSS-style my DIV's in order to make a calendar view of some data.
Here is a screenshot of what I've got so far.
I'm using a table, with tr and five TD's. Inside the TD's I've added a DIV that has display: inline-block. Somewhat like this structure:
<table>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</table>
It looks alright as long as there is no text inside the DIV, but when I add some text the grid is skewed, as seen in the picture.
I've tried different variants of TABLE vs DIV, but I just can get it do display correctly.
Do you have any suggestions as to how I can create this calendar view?
I don't want to use a calendar-plugin, since this is a part of a more complex resource-view I'm building.
Use CSS to align the divs in a table-like way using text-align and vertical-align, making sure you give each div a separate id.
HTML
<div class="table" id="one"></div>
<div class="table" id="two"></div>
<div class="table" id="three"></div>
<div class="table" id="four"></div>
CSS
.table{
width: 45%;
height: 45%;
background-color: #efefef;
}
#one{
text-align: left;
vertical-align: top;
}
#two{
text-align: right;
vertical-align: top;
}
#three{
text-align: left;
vertical-align: bottom;
}
#four{
text-align: right;
vertical-align: bottom;
}
try that and tell me if it is insufficient.
if you have more than 9 divs, use pixels for the alignment
I have a table with two tds to each row. I've come to notice that if I wanted to line break the text the text inside the opposite td does not vertically align to it. The td with the line break goes to the top of the cell where the other stays vertically aligned to the center. What would be the most effective solution in keeping both center and having their baselines equally aligned?
http://jsfiddle.net/653K2/2/
HTML
<table>
<tbody>
<tr>
<td>Category One</td>
<td>Data</td>
</tr>
<tr>
<td>Category Two</td>
<td>Data<br>More Data</td>
</tr>
</tbody>
</table>
CSS
table {
width: 100%;
}
table tr td:first-child {
color: #777;
width: 40%;
}
tr {
height: 40px;
border-bottom: 1px dotted #e6e6e6;
}
There is a vertical-align property on css, is this what you want?
td { text-align:left; vertical-align:top; padding:0}
http://jsfiddle.net/653K2/3/
Perhaps what you want is to add to your css
td {vertical-align: baseline}
replace baseline with one of [baseline, top, center, bottom]
td {padding: 10px 0; vertical-align: top;}
http://jsfiddle.net/653K2/4/