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>
Related
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.
What's the default css of a td which makes it so that stuff are automatically centered vertically?
I know how to get things to center horizontally given that a div is smaller than its parent with margin: 0 auto but what's allowing a td to center vertically automatically?
#outer {
width: 200px;
height: 200px;
background-color: yellow;
}
#inner {
width: 60%;
margin: auto;
background-color: red;
}
<div id="outer">
<div id="inner">
centered only horizontally
</div>
</div>
<table height=200 border=1>
<tr>
<td>
I center automatically
</td>
</tr>
</table>
The default css of td elements is display: table-cell. This property, will also accept vertical-align.
So, you might need to set the css:
td {
vertical-align: middle;
}
.outer {
display: table-cell;
vertical-align: middle;
width: 400px;
height: 200px;
border: 1px solid black;
}
.inner {
width: 60%;
margin: 0 auto;
background-color: yellow;
text-align: center;
}
<table height="200" border="1">
<tr>
<td>I am vertically centered</td>
</tr>
</table>
<div class="outer">
<div class="inner">
This is vertically centered
</div>
</div>
vertical-align: inherited;
for TD & TR in user agent stylesheet i.e default browser stylesheet. So TD is referring vertical-align of TBODY which is as below and thats causing it to align vertically in middle.
vertical-align: middle;
To override, default stylesheet you can do something like
td{
vertical-align: top !important ;
}
#outer{display:table-cell;}
#inner{vertical-align:middle;}
I am trying to replace images in a single horizontal row - as cells in a table row.
That layout works with any other elements but not with <img> for some reason.
Check this:
div { display: table; border: 1px solid red; }
div > img { display: table-cell; }
<p>These shall be replaced in single row but they are not:</p>
<div>
<img src="http://lorempixel.com/output/city-q-c-78-50-6.jpg" />
<img src="http://lorempixel.com/output/people-q-c-78-50-5.jpg" />
<img src="http://lorempixel.com/output/animals-q-c-78-50-5.jpg" />
</div>
Any idea?
UPDATE: FF follows CSS spec and replaces them in single row. All other browsers are not. Heil Firefox!
EDIT
img is a replaced element, it's measured calculations and box model are different. See this ARTICLE
If you insist on using table and are concerned about spacing look at this fork of #StevenThomas's PenCode
I removed all the divs
.container { display: table; table-layout: auto; width: 100%; }
img { display: inline-table; margin: .33em; width: 30%; height: auto; }
Use margin: .125em if you want 4px; border-spacing.
Change div to inline-block
Change img to inline-block
div {
display: inline-block;
border: 1px solid red;
}
div > img {
display: inline-block;
}
<p>These shall be replaced in single row but they are not:</p>
<div>
<img src="http://lorempixel.com/output/city-q-c-78-50-6.jpg">
<img src="http://lorempixel.com/output/people-q-c-78-50-5.jpg">
<img src="http://lorempixel.com/output/animals-q-c-78-50-5.jpg">
</div>
Instead of a div, you could try using a table. Here's the syntax:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
The tr tags are rows, the td tags are columns. I'd use this syntax:
<table>
<tr>
<td><img src="http://lorempixel.com/output/city-q-c-78-50-6.jpg"></td>
<td><img src="http://lorempixel.com/output/people-q-c-78-50-5.jpg"></td>
<td><img src="http://lorempixel.com/output/animals-q-c-78-50-5.jpg"></td>
</tr>
</table>
div {
display: inline-flex;
border: 1px solid red;
}
div > img {
height: 250px;
width: 250px;
display: table-cell;
}
Here,I just replaced display:table to display:inline-flex and this worked for me.
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>
How can I get three divs to look as they are shown below with only HTML and CSS? Is it possible to align them in a way that the bottom text will stay under the text which is the longest?
<html>
<div id=1>
Short text
Bottom text?
</div>
<div id=2>
Long text
Bottom text?
</div>
<div id=3>
Not so long text
Bottom text?
</div>
</html>
As #Ruddy pointed outThanks for that, I used Flexbox approach for this, with CSS Positioning, so am using display: flex; for the parent element, and wrapping the bottom text in a span, and than am positioning the span to bottom using position: absolute; also, you don't have to assign fixed height to the containers, as we are using display: flex;
Flex Demo
div.parent {
display: flex;
}
div.parent > div {
border: 4px solid #000;
width: 33%;
float: left;
position: relative;
padding-bottom: 30px; /* Make sure you tweak this, to the
highest height of your bottom content*/
}
div.parent > div > span {
position: absolute;
bottom: 0;left: 0;
}
Well, obviously you can use position: absolute; with bottom: 0; with padding-bottom: 30px;(approx) and wrap the bottom text in span and use position: relative; on the container element but again, you won't be able to stretch the other two containers which doesn't have height and thus it will fail.
So you need to use display: table-cell; with vertical-align: bottom;, it will keep pushing the text to the bottom which has content, also, vertical-align: bottom; will see to it that even the other containers text stick to the bottom
Demo
div.parent {
display: table;
}
div.parent > div {
border: 4px solid #000;
width: 33%;
display: table-cell;
vertical-align: bottom;
}
Yes, this is possible. But first: give the three a wrapper. Beside that, you can't use numbers as ID's.
Here you go: http://jsfiddle.net/SP68r/
<div class="wrapper">
<div id="first">
Short text
Bottom text?
</div>
<div id="second">
Long text
Long text
Long text
Long text
Long text
<div class="bottom">bottom text</div>
</div>
<div id="third">
Not so long text
</div>
</div>
The CSS
.wrapper { width: 350px; }
#first, #second, #third { float: left; width: 100px; }
#first { margin-right: 10px; }
#second { padding-bottom: 40px; margin-right: 40px; }
div.bottom { position: absolute; bottom: 0; }
<div id="1" style="border: 2px black solid; width: 120px;
height: 160px; position: relative;">
<div style="text-align: left;" id="1-1">
Not so long text
</div>
<div style="left: 17%;position: absolute; bottom:0px;" id="1-2">
Bottom text?
</div>
</div>
You can use position:absolute
DEMO
Simple Solution : Use a table.
<table border="1" width="100">
<tr valign="top">
<td>DIV 1</td>
<td>DIV 2<BR/>THIS IS A BIG, BIG, LONG PARAGRAPH, WHICH WILL GO DOWN THAN THE OTHER TWO CELLS.</td>
<td>DIV 3</td>
</tr>
<tr>
<td>BOTTOM TEXT</td>
<td>BOTTOM TEXT</td>
<td>BOTTOM TEXT</td>
</tr>
</table>
fiddle here.