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>
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 am trying to get a horizontal line to stretch between the first and last columns in a table but I need the first and last columns to wrap if the text is long. The only way I have found to get the desired effect is to use width:100%; on the middle column, and white-space:nowrap; on the first and last, but I need to find another way as I need the text to wrap when there isn't enough space. Is there a way to achieve this effect in plain CSS?
https://jsfiddle.net/macu/8axk5qv5/4/
table {
width: 100%;
}
td {
vertical-align: middle;
white-space: nowrap;
}
td:nth-child(2) {
width: 100%;
}
.line {
border-top: thin solid blue;
}
<table>
<tr>
<td>Title cell with a long title that should wrap</td>
<td><div class="line"></div></td>
<td>Another cell, should wrap</td>
</tr>
</table>
If the text is long enough there should be no line, and the text should wrap normally:
You can put a span or div in each cell, and make them to use white background, then set the line on the table row to create such layout visually.
Check out the fiddle demos below, so you can easily resize and see the wrapping text.
jsFiddle
.table {
width: 100%;
border-collapse: collapse;
}
.table tr {
background: linear-gradient(blue, blue) center/99.99% 1px no-repeat;
}
.table div {
background: white;
display: inline-block;
}
.middle div {
min-width: 100px; /*remove or adjust value as need*/
}
.last {
text-align: right;
}
<table class="table">
<tr>
<td class="first">
<div>Title cell with a long title that should wrap</div>
</td>
<td class="middle">
<div><!-- This td can be removed if no min-width needed --></div>
</td>
<td class="last">
<div>Another cell, should wrap</div>
</td>
</tr>
</table>
But using flexbox can make it much easier, if you don't have to use table.
jsFiddle
.container {
display: flex;
}
.line {
background: linear-gradient(blue, blue) center/1px 1px repeat-x;
flex: 1;
min-width: 100px; /*remove or adjust value as need*/
}
<div class="container">
<div>Title cell with a long title that should wrap</div>
<div class="line"></div>
<div>Another cell, should wrap</div>
</div>
try by removing the white-space: nowrap; on the TD tag, then target the first and the third TD with
td {
vertical-align: middle;
//white-space: nowrap;
}
td:nth-child(1),td:nth-child(3) {
//add whatever min-width AND max-width so it could be something like this
min-width:150px;
max-width:300px;
}
see if that helps.
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.
How can I align vertical text, that is generated by two spans, inside a div inside a table cell. I've tried many combinations of text-align,display but nothing worked. I have this html segment
<table>
<tr>
<td>
<div class="container">
<span>This is span-sentence-1</span>
<span>This is span-sentence-2</span>
</div>
</td>
</tr>
</table>
and the output is
This is span-sentence-1 This is span-sentence-2
while I want to be rendered like this
This is span-sentence-1
This is span-sentence-2
fiddle:http://jsfiddle.net/hjuxdd1b/1/
You can use following:
.container {
width: 100%;
line-height: 50px;
border: 1px solid black;
/*height: 50px; Remove height*/
}
.container span{
display: block;/*Set display to block*/
}
fiddle
Give display: block to .container span
.container span {display: block;}
Remove the height and line-height in the .container
Fiddle: http://jsfiddle.net/praveenscience/hjuxdd1b/7/
Add br tag after the first span or replace span with div.
You may not need that div:
Set those spans to display: block so they are each given their own line.
Give vertical-align: middle to the td so that its content will stay vertically centred.
Have a fiddle
By default a span is display: inline so they will line up next to each other. You could read more about the span element over on the MDN.
CSS
td {
vertical-align: middle;
height: 100px;
border: 1px solid black;
}
td span {
display: block;
}
HTML
<table>
<tr>
<td>
<span>This is span-sentence-1</span>
<span>This is span-sentence-2</span>
</td>
</tr>
</table>
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/