I'm not able to get my table cells contents to align correctly.
I want the text and images in my cells to align to the bottom.
The images also have a style:
Code:
CSS file:
#pagy3 table tr td {
text-align: center;
vertical-align: text-bottom;
width: 25%;
font-size: 14px;
height: 100px;
}
HTML file:
<div id="pagy3">
<table align="center" border=1;>
<col width="180px">
<col width="180px">
<col width="180px">
<col width="180px">
<tr>
<td colspan=4>
<h2>Title</h2>
</td>
</tr>
<tr>
<td>Image<br>text</td>
<td>Image<br>text</td>
<td>Image<br>text</td>
<td>Image<br>text</td>
</tr>
</table>
</div>
Try ...
vertical-align: bottom;
It looks like you are aligning to the wrong elements, possibly ...
bottom: The bottom of the element is aligned with the lowest element on the line.
text-bottom: The bottom of the element is aligned with the bottom of the parent element's font.
vertical-align: text-bottom;
That aligns elements to the bottom of the parents font.
vertical-align: bottom;
Aligns ALL elements in the container to the BOTTOM of the container. You probably want to use vertical-align:bottom instead.
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 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 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 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!
<table>
<tr>
<td class="left"><div class="c">centrated<br>on<br>lef side</div></td>
<td>middle-td</td>
<td>right-td</td>
</tr>
</table>
Here is the CSS:
td.left {
width: 200px;
left-padding: 0;
}
div.c {
text-align: center;
}
Now everything is centered.
I want to place the div on left side and everything inside the div should be centered. I've tried everything that I can do but I was unable to do what I want.
use the float:left property on the div