Look at the image below
How do you center the image in the table collumn (<td>)? Padding don't space at the top only to the right and bottom
Here is the table html code
<table>
<tbody>
<tr>
<td class="bedButton ward-A">A115:1</td>
<td class="bedButton ward-A">A116:1</td>
</tr>
</tbody>
</table>
and here is the CSS:
.bedButton{
padding:25px;
width:250px;
height:300px;
background:url(../images/bedview/bed-background.png) no-repeat;
margin-left: auto;
margin-right: auto
}
To horizontally center the text, use:
td {
text-align:center;
}
jsFiddle example
Related
I know that similar problem have been asked and answered previously on this site, but unfortunately none of the answers have been able to help.
I need my text to vertically align in the center/ bottom of my table row. This i my css text:
h3 {
vertical-align:bottom;
font-weight: lighter;
padding-top: 0px;
background: url(images/bg3.jpg);
background-repeat: no-repeat;
background-position:left bottom;}
If your text is single line, than use line-height = height:
h3 {
height: 30px;
line-height: 30px;
display: inline-block;
}
Use align and valign properties in your table cell:
<table width="100%" border="1">
<tr>
<td height="300" align="center" valign="middle">
<h3>Hello World</h3>
</td>
</tr>
</table>
jsFiddle Demo.
From your question it seems you want to vertically align to the bottom and horizontally to the center.. if that is true you should do this:
FIDDLE
td { text-align:center; vertical-align:bottom;}
*Notice the styles need to be on the table cell and not on the inner element (h3)
good luck!
I have two tables, which I would like to position next to each other BUT want them to be on the center of the page.
I almost did it, I only have a problem how to align them on the center of the page. My example:
Demo
My HTML:
<table class="table_on_the_left">
<tr><td>
hello demo here
</td></tr></table>
<table class="table_on_the_right">
<tr><td>
hello demo here 2
</td></tr></table>
My CSS:
table.table_on_the_left {
position:center;
float:left;
}
table.table_on_the_right {
position:center;
float:right;
}
You may want to use inline-block instead of float:
table.table_on_the_left, table.table_on_the_right {
display:inline-block;
}
And to make the horizontal align text-align:center on the parent:
body {
text-align:center;
}
Check this Demo
Here you can know more about inline-block
Aside a recommendation plus if you are trying to set the layout for your page avoid to use <table> save it only for tabular data and instead use <div> and positioning.
You can wrap them in a div and use that to make them sit next to eachother and center them.
HTML:
<div id="wrap">
<table class="table_on_the_left">
<tr>
<td>hello demo here</td>
</tr>
</table>
<table class="table_on_the_right">
<tr>
<td>hello demo here 2</td>
</tr>
</table>
</div>
CSS:
table.table_on_the_left {
position:center;
float:left;
}
table.table_on_the_right {
position:center;
float:right;
}
#wrap {
width: 250px;
margin: 0 auto;
}
DEMO HERE
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/
I have searched quiet a bit and found a lot of css that I tested but margin: 0 auto; has not worked and. I cannot get my footer to stay center and also at the bottom. I can get it to the bottom and I can get it centered but not both.
Here is the HTML
<div align="center">
<table class="copyrightbar">
<tr>
<td class="noborder">
<img class="ledge" src="images\lefthalfcircle.png">
</td>
<td class="noborder" >
<img class="copyrightimg" src="images\copyright.png">
</td>
<td class="noborder">
<img class="redge" src="images\righthalfcircle.png">
</td>
</tr>
</table>
</div>
Here is the CSS
.copyrightbar
{
border-collapse: collapse;
border: 0px;
padding: 0px;
float: left;
position: fixed;
bottom: 10px;
display:block;
}
I am not sure why it won't stay centered or what I am doing wrong. Right now the thin is set up to stay at the bottom only.
Try this jsfiddle
I know the images aren't actually showing, but it should display as you required.
HTML:
<div class="wrapper">
<table class="copyrightbar">
<tr>
<td class="noborder">
<img class="ledge" src="images\lefthalfcircle.png">
</td>
<td class="noborder" >
<img class="copyrightimg" src="images\copyright.png">
</td>
<td class="noborder">
<img class="redge" src="images\righthalfcircle.png">
</td>
</tr>
</table>
</div>
CSS:
.wrapper {
position: fixed;
bottom: 10px;
width: 100%;
}
.copyrightbar {
margin: 0 auto;
border-collapse: collapse;
border: 0px;
padding: 0px;
}
What is the point to using float:left ? If you want it centered, floating this entire element to the left serves no purpose since it does the exact opposite of what you want.
However, if you want to keep it, then your wrapper div should be given an id, lets say id="footer" then use this css
#footer {
width:400px (not sure if that is too wide or not, you can play around with it until it is the right width)
margin: 0 auto;
}
Add a class or ID to the wrapper div. Then use CSS to place it at the bottom using `position: fixed'.
Then set a width on your table (via CSS) and use the margin: 0 auto declaration you mention above. (Oh and remove position: fixed from the table)
May be because your CSS file has { float: left; }?
I have a weird problem with a when I want to change an inline style for a table to a style defined in CSS. My goal is to align this table to the left of the page.
Aligns correctly to the left:
HTML:
<table class="box-table" style="margin-left: 0px">
<tr>
<td>table content</td>
</tr>
</table>
CSS:
table.box-table
{
width: auto;
text-align: left;
}
Doesn't align to the left (aligns to the center of the page)
HTML:
<table class="box-table">
<tr>
<td>table content</td>
</tr>
</table>
CSS:
table.box-table
{
width: auto;
text-align: left;
margin-left: 0px;
}
The only change I did was moving the margin-left -property from the HTML- to the CSS-code. Any idea why tis happens?
Problem was that this class was declared 2 times in my CSS, which had conflicting values about the margin-left -property.