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!
Related
I'm trying to make an icon fit nicely between text in HTML/CSS.
It seems like this should be possible with display:inline-block;. However this always seems to go wrong due to phantom padding:
<div style="">
<div style="display:inline-block;">Text here</div><img style="height:24px;display:inline-block" src="{{ url_for('static', filename= 'images/icon-unsorted.png' ) }}" />
</div>
As you can see the outer div becomes 25.64px high, while both its child elements are 24px high.
Moreover the image is aligned at the bottom, whereas the text is aligned to the top of the outer div.
I however want both of them to be vertically (center) aligned.
If i try to force the outer div to 24px: <div style="height:24px;">, contents remain incorrectly aligned, and the icon simply overflows below its parent.
So I suppose my question is this:
How do i make an image fit nicely inside a line of text, where the image has the same height as the text, or both are center aligned vertically?
I might try a more css oriented approach. I made a small example below.
.btnStyle {
position: relative;
display: inline-flex;
width: 110px;
height: 24px;
text-align: left;
font-family: Helvetica, sans-serif;
color: black;
background-image: url(https://extortionguild.com/images/icon-unsorted.png);
background-size: 17.5px 100%;
background-position: right center;
background-repeat: no-repeat;
margin-right: 20px;
}
table {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: calc(100% - 20px);
font-size: 18px;
}
table td {
vertical-align: middle;
}
<div style="display:inline-block; width: 100% height: 40px;">
<div class="btnStyle"><!-- Button 1-->
<table>
<tr>
<td>
Text here
</td>
</tr>
</table>
</div>
<div class="btnStyle"><!-- Button 2-->
<table>
<tr>
<td>
Text here
</td>
</tr>
</table>
</div>
<div class="btnStyle" style="width: 200px;"><!-- Button 3 - wider-->
<table>
<tr>
<td>
Even More Text here
</td>
</tr>
</table>
</div>
</div>
• Using classes will also allow you to make changes to all the buttons via the btnStyle class, instead of having to change each individually.
• Tables have a "built-in" vertical-align: middle; option and it's a really simple method of aligning any cell content centered vertically. -- Documentation
• You will need to edit background image url to background-image: url(images/icon-unsorted.png); to load your image file.
development-ninja was also on the right track with "flex", but it needs to be "inline-flex" or they will try to stack. -- For inline-flex browser support info click here
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 need to be able to overwrite vertical align for an image inside a td tag that has a vertical align defined.
I tried giving the image vertical-align: middle, and while this works in ff, the image still drops below the line in chrome.
The html is provided though bbcode editor.
<table>
<tr>
<td style="vertical-align: top">
The text in table cell needs to align to top
<br/>
<br/>
image should vertically center relative to line <img src="https://jsfiddle.net/img/logo.png"/>
</td>
</tr>
td {
border: 1px solid blue;
height: 200px;
}
td img {
vertical-align: middle;
}
fiddle
works in firefox, but not in chrome.
Middle vertical align of td will fix your problem:
<td style="vertical-align: middle">
https://jsfiddle.net/6okr7ayy/7/
"vertical-align: top" cannot be changed or removed (its used by bbcode editors for various purposes)
Then try just to override it in CSS with !important
td {
vertical-align: middle !important;
}
wrap the text and the image inside the td into a paragraph. Now your code works on Chrome too:
<table>
<tr>
<td>
<p>The text in table cell needs to align to top
<br/>
<br/>image should vertically center relative to line
<img src="https://jsfiddle.net/img/logo.png"/></p>
</td>
</tr>
</table>
CSS stays at it was:
td {
border: 1px solid blue;
height: 200px;
}
td img {
vertical-align: middle;
}
See the fiddle.
Overwrite the standard the vertical-align property with !important within your CSS:
UPDATE
Add a element to your text and vertical-align your image
td img {
background: red;
height: 40px;
vertical-align: middle;
}
td {
border: 1px solid blue;
height: 200px;
}
td img{vertical-align:middle}
<table>
<tr>
<td style="vertical-align: top">
The text in table cell needs to align to top The text in table cell needs to align to top The text in table cell needs to align to top
<br/>
<br/>
<span>image should vertically center relative to line</span> <img src="https://jsfiddle.net/img/logo.png"/>
</td>
</tr>
</table>
I'm struggling spreading fives divs evenly inside a resizeable div. I have looked at How to spread elements evenly (horizonatly)? but cant get it to work :-(
The problem seems to be that even thoug my div width is set to 20% the last element is wrapped onto the next line if the surrounding divs width is not dividable by 5.
My css is this
#exposureSummaryContainer > div { width: 20%;display: inline-block;}
and my html:
<div id="exposureSummaryContainer">
<div>1.000.000</div>
<div>1.000.000</div>
<div>1.000.000</div>
<div>1.000.000</div>
<div>1.000.000</div>
</div>
How do I ensure that all five elements stay on the same line?
I made this http://jsfiddle.net/GTwFb/ to illustrate my problem.
Add float:left;
#exposureSummaryContainer > div { width: 20%;display: inline-block; float:left; background:red}
DEMO
There is a whitespace you don't see, if you removed it,
<div id="exposureSummaryContainer"><div>1.000.000</div><div>1.000.000</div><div>1.000.000</div><div>1.000.000</div><div>1.000.000</div></div>
it shall work.
This is maybe not the best looking way.. but its working
#exposureSummaryContainer { width: 100%; display: table; }
#exposureSummaryContainer > div { width: 20%;display: table-cell;}
You can edit the width to a specific size
the problem is the physical space on the markup amongs div elements when their display is inline-block, so a workaround is the following:
#exposureSummaryContainer {
white-space: nowrap;
word-spacing: -3px;
letter-spacing: -3px;
}
#exposureSummaryContainer > div {
width: 20%;
display: inline-block;
white-space: normal;
word-spacing: normal;
letter-spacing: normal;
}
I'd use the float: left; property
This works for me:
http://jsfiddle.net/GTwFb/2/
Well I would you the trick of table:
<table style="width:whateveryouwant">
<tr>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
<td style="width:20%"><div>1.000.000</div></td>
</tr>
</table>
This works for me all the time ^_^
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"