I've been trying to align an image to the center of the table td. It worked with setting margin-left to a specific value but it also increased the size of td too and that isn't exactly what I wanted
Is there any efficient ways of doing this? I used percentages for the height and witdh of the table.
<td align="center">
or via css, which is the preferred method any more...
<td style="text-align: center;">
Simple way to do it for html5 in css:
td img{
display: block;
margin-left: auto;
margin-right: auto;
}
Worked for me perfectly.
Center a div inside td using margin, the trick is to make the div width the same as the image width.
<td>
<div style="margin: 0 auto; width: 130px">
<img src="me.jpg" alt="me" style="width: 130px" />
</div>
</td>
This fixed issues for me:
<style>
.super-centered {
position:absolute;
width:100%;
height:100%;
text-align:center;
vertical-align:middle;
z-index: 9999;
}
</style>
<table class="super-centered"><tr><td style="width:100%;height:100%;" align="center" valign="middle" >
<img alt="Loading ..." src="/ALHTheme/themes/html/ALHTheme/images/loading.gif">
</td></tr></table>
Set a fixed with of your image in your css and add an auto-margin/padding on the image to...
div.image img {
width: 100px;
margin: auto;
}
Or set the text-align to center...
td {
text-align: center;
}
<table style="width:100%;">
<tbody ><tr><td align="center">
<img src="axe.JPG" />
</td>
</tr>
</tbody>
</table>
or
td
{
text-align:center;
}
in the CSS file
td image
{
display: block;
margin-left: auto;
margin-right: auto;
}
Another option is the use <th> instead of <td>. <th> defaults to center; <td> defaults to left.
As per my analysis and search on the internet also, I could not found a way to centre the image vertically centred using <div> it was possible only using <table> because table provides the following property:
valign="middle"
Related
What I want is the image to be the same height of the td when the image isn't there, i.e. 300px, not the height of the image src. I can't specifiy the height of the image, td or table since the parent div represents the height of a responsive container. I've spent far too long on this and tried many things and for some reason the image always insists on being its full height.
<div style='height:300px;width:300px;'>
<table style='height:100%;width:100%;'>
<tr>
<td>
<img style='height:100%;width:100%;' src='https://placehold.it/1920x1200'>
</td>
</tr>
</table>
</div>
Try using CSS instead of inline styles. This helps keep your code more flexible. I've set the height and width to be auto and the max-height and max-width to be at 100% so that the image is contained inside the table cell, but also correctly scaled.
.table-container {
height: 300px;
width: 300px;
padding: 5px;
border: 1px solid red;
}
table td {
border: 1px solid blue;
padding: 0;
}
table td img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class='table-container'>
<table>
<tr>
<td>
<img src='https://placehold.it/1920x1200' />
</td>
</tr>
</table>
</div>
Try This, added "overflow: hidden;position: relative;" to parent and "position: absolute;" to child
<div style='height:300px;width:300px;'>
<table style='height:100%;width:100%; overflow: hidden;position: relative;'>
<tr>
<td style='position: absolute;'>
<img style='height:100%;width:100%;' src='https://placehold.it/1920x1200'>
</td>
</tr>
</table>
</div>
output screen
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>
I need your help,
The problem that I am having is that my table does not conform to 100% height of my window. How can the HTML coding below be amended to accommodate this change?
<table style="width: 100%; height: 100%; border: solid 1px black;">
<tr>
<td style="text-align: center; vertical-align: middle; padding: 5px; position: relative;">
<p style="display: inline-block; width:100%; background: #ccc; vertical-align: middle;">
Title Text
</p>
</td>
</tr>
</table>
Expected outcome is:
You can also change height:100%; to height:100vh; Check out this EXAMPLE
Try this:
Add to your CSS following code:
html, body {
height: 100%;
}
It's important to expand the html and body first.
After that you can make a <table style="height:100%"> like in the JS Fiddle
I'm trying to align three images in a class div into a straight horizontal line.
<div class="topimages">
<img src="code/images/image_personallogo.png" alt="personallogo">
<img src="code/images/image_propercorn.png" alt="propercorn">
<img src="code/images/image_christmas.png" alt="christmascard">
</div><!--top images-->
and the CSS so far
.topimages {
display: table;
width: 1024px;
margin: 40px auto;
}
.topimages img {
width:319px;
height:319px;
}
So the problem is that the images are almost perfectly aligned except that there is different space between the second and third image than between the first and second image. This is what I am talking about : http://postimg.org/image/y00x4nvtr/
Anyone knows what cause this and how I can fix it?
Thanks.
The nicest way is to use a table with one tr:
HTML:
<table id="myImages">
<tr>
<td>
<img src="code/images/image_christmas.png" alt="christmascard" />
</td>
<td>
<img src="code/images/image_propercorn.png" alt="propercorn" />
</td>
<td>
<img src="code/images/image_christmas.png" alt="christmascard" />
</td>
</tr>
</table>
To change margin in a table, you must use border-collapse and border-spacing
CSS:
#myImages {
border: 1px solid silver;
padding: 50px;
margin: 0px auto;
border-collapse: separate;
border-spacing: 20px;
}
#myImages img {
width: 320px;
height: 320px;
}
In a table or (display: table) there is no need to set a whole width to use margin: 0 auto to center the element. The width comes from the width of the elements within. And from paddings and margins.
https://jsfiddle.net/ka827L97/
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; }?