`vertical-align: middle` doesn't do what I expected - javascript

If I am in a table cell in a apply the CSS rule vertical-align: middle; to that cell then all the text centers vertically in the cell.
<table>
<tr>
<td style="vertical-align: middle;">
I am vertically centered text!
</td>
</tr>
</table>
However, if I apply this to another element it functions differently or not at all. For example:
<div style="width: 300px; height: 400px; vertical-align: middle;">
I am not vertically centered, but I wish I was :(
</div>
But then if I apply it to an image tag then it adjusts how the image is oriented with other inline elements.
Here is a jsfiddle with examples of all these scenarios.
My question is, how can I accomplish vertical center alignment within a simple DIV just like the way it behaves in a table cell?

Add display: table-cell to your div.
jsFiddle: http://jsfiddle.net/7FYBa/20/
<div class="outer" style="position:absolute;">
<div class="inner" style="display:table-cell; vertical-align:middle;">
I am not vertically centered, but I wish I was :(
</div>
</div>

But of course. Vertical centering is pretty funky in CSS.
I'd suggest you read up on some of the vertical centering techniques out there. Different elements and considerations equate to different methods. Here's an article I'd suggest.

You can try something like this using jQuery http://jsfiddle.net/7FYBa/30/

vertical-align works for none-table-elements when you increase the line-height.
#elem {
vertical-align: middle;
line-height: 100px;
}
But of course layouting is not that easy using line-height.

Related

Div with style display:table has wrong height

I have a div that wraps a table with style display: table. Table contains div with height:500px http://jsfiddle.net/9ucm7z9h/:
<div style="width: 400px; display: table; background-color: blue;">
<div style="height: 100px; background-color: green; overflow: scroll">
<table style="width: 100%;">
<tr>
<td>
<div id="test" style="height: 500px; background-color: yellow;"> </div>
</td>
</tr>
</table>
</div>
</div>
This code rendered differently in IE and Chrome/Firefox. It is a Chrome/Firefox bug? What can I do to force it rendered as in IE?
It seems to be a bug which can be eradicated by triggering the layout somehow.
First of all, the child element of one ruled as display:table might turn into display:table-row or display:table-cell by default, even if not written via the CSS rules. Browsers always try to correct or fix things which obviously here do not work out properly.
Trying to trigger layout using float or display:inline-block here looks like it fixes the misbehavior of the parent displayed as table, at least in Firefox.
http://jsfiddle.net/9ucm7z9h/3/
You can find a bug report here.

How to have Side-By-Side Divs with one taking remaining space?

My problem is I would like a set of side by side divs. These divs can grow to an arbitrary height so vertical aligning is important. As suggested by another SO post, in order to tackle the vertical align problem I have a structure similar to this. Please help me fill in the blanks.
<div id="main-container">
<div class="formatter">
<div class="content1">
<!--- I am fixed at 200px ---->
</div>
</div>
<div class="formatter">
<div class="content2">
<!--- I have a rendered element. I don't know exactly how high or wide I am, but I'm not going to take up the whole thing. --->
</div>
</div>
<div class="formatter">
<div class="content3">
<!--- I have some text and just want to take up the rest of the main container less padding and borders ----->
</div>
</div>
</div>
Display within the browser:
CSS:
#main-container {
width: 900px;
}
.formatter {
display: inline-block;
vertical-align: middle;
}
.content1 {
float: left;
width: 200px;
}
You need to declare them as table-cell.
Lets try an unorthodox approach
Auto width and vertical alignment becomes very easy using CSS flex display
Code to get your basic layout, vertical and horizontal alignment (withour padding or borders or text-alignment)
<div id="main-container">
<div class="content1">a
<!--- I am fixed at 200px ---->
</div>
<div class="content2">bbb
<!--- I have a rendered element. I don't know exactly how high or wide I am, but I'm not going to take up the whole thing. --->
</div>
<div class="content3">c
<!--- I have some text and just want to take up the rest of the main container less padding and borders ----->
</div>
</div>
#main-container {
width: 900px;
display: flex;
}
.content3 {
flex-grow: 1;
}
.content1 {
width: 200px;
}
Fiddle - http://jsfiddle.net/n3CwB/
Now you may want to retain your original HTML structure if you want more control of the alignment of the content (like vertically align middle the content), but this should get you started with the basic layout.

Floating repeated divs, how to keep XY together

I am currently creating many figures using the JavaScript library D3 (but I don't think D3 has any relevance for my problem). The figure is placed in div X and the text explaining the figure is in div Y. I basically want to create a pattern like this:
XYXYXY
XYXYXY
but instead (depending on how wide my window since I do not want to fix the width), what I get this:
XYXYX
YXYXY
I tried putting XY in a parent div Z<XY>, so that every pair of XY stays together, but that does not work. I also don't think clearing is necessarily the answer here, but I have tried all combinations without success.
Any help is greatly appreciated.
Try
white-space: nowrap
You may also have to change the floats to for your XY divs:
display: inline-block
If I understood the problem correctly, you don't need to use float. Display the divs as inline blocks: display: inline-block.
That will flow the divs as "character blocks" doing the wrap, you'll need to have a parent for the XY to keep the text together with the image.
An example: http://jsfiddle.net/D9BAv/
HTML:
<div class="figure">
<div class="picture"></div>
<div class="text">Example 1</div>
</div><!-- reapeated ... -->
CSS:
.figure {
display: inline-block;
}
.picture {
width: 3rem;
height: 3rem;
margin:auto;
background-color: blue;
}
If I have understood you correctly, maybe this will work. You could also use display: inline-block instead of float: left if you don't need to support IE8 and below.
http://jsfiddle.net/GQ8Uw/
HTML
<div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div><div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div>
<div class="cont">
<div class="x">X</div><div class="y">Y</div>
</div>
CSS
.cont {
width: 100px;
float: left;
}
.x, .y {
width: 50%;
float: left;
}
.x {
background: #ccc;
}
.y {
background: #ecc;
}
Ok, I solved the problem. So I was wrong, it did have something to do with D3. Each time, I was essentially adding a child div to the same parent, and therefore the inline-block simply had no effect.
I ended up adding a "last-child" feature in my code like "d3.select(".figure:last-child").append(...", for both the picture and the text, and it works perfectly.
I saw the problem by adding a border around the parent div, and I noticed that all children were in the same div. I then found the solution from: What is the equivalent of jQuery's $(".cell:first") in D3?

Positioning div absolute inside td does not work in firefox

I am using jquery draggable to drag and drop the contents on the table cells that are part of editor. We are allowing users to directly drag and drop content to respective tds and use the template for creating prints and emails.
Whenever user drags over the table-cells of editor, a div with option to replace split and add are shown.
I am appending this div inside hovered td.
<tr>
<td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
<h1><a target="blank" href="http://local.smgt.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a>
<br><br><a target="blank" href="http://local.smgt.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>
<div class="contentdiv" style="position: absolute;">
This will show options replace/split/add new
</div>
</td>
</tr>
The problem is position absolute for this div doesnt work in firefox.
And i can not wrap up the contents of td inside other div having position relative as suggested Here and Here. The reason being for this is i am not sure how complex the dom of td can be as we are allowing user to fully customize the contents inside it.
Link To Fiddle
works perfectly in Chrome though. Any other solution guys??
Instead of using <table> <tr> <td> </td></tr> </table>, try to design div as a table.
For your reference http://snook.ca/archives/html_and_css/getting_your_di . After this try your code, it may help you out.
Design div as table is best approach. This may be used for responsive design too.
<td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
<h1 style="position:absolute;"><a target="blank" href="http://local.amp.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a><br> <br> <a target="blank" href="http://local.amp.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>
<div class="contentdiv"> </div>
</td>
you've given absolute position to <div class="contentdiv"> </div>
Remove absoute position for this and add absolute position for <h1> which is placed above to <div class="contentdiv"> </div>.
I've checked. It's working perfectly.
http://jsfiddle.net/qfquj/69/
The following are I modified.
removed absolute position for
.contentdiv{
height:200px;
width:300px;
background: url('http://i.stack.imgur.com/2LvR1.jpg') no-repeat;
color: black;
background-size: 100% 100%;
text-align: center;
top:0;
opacity:.6
}
and added inline css for h1
<h1 style="position:absolute;">
Here is answer for your question. I hope this may help you.
http://jsfiddle.net/qfquj/73/
What I modified is,
Removed top:0 and added float:left
.contentdiv{
height:200px;
width:300px;
background: url('http://i.stack.imgur.com/2LvR1.jpg') no-repeat;
color: black;
background-size: 100% 100%;
text-align: center;
position:absolute;
opacity:0.6;
float:left;
}
Added inline css float left for <h1>
<h1 style="float:left">
Firefox has a problem with absolute positioning whenever tables or display: table-cell is involved, where it will ignore the table cells as a relative parent.
It's a 13 year old Gecko bug.
You can fix this by reverting from the table structure and using display: inline-block on your cells for example, or putting another relative div around your table cell.

CSS overflow: ???? and Tables or some other method?

I have a table that is 640px wide seperated in two [TD]'s. The left one is 150px and the right one 490px.
The question is, using CSS or any other method, how do I stop the content from overflowing the size I have set and making the page look like a mess.
I have have tried the css overflow: scroll method and in some cases this works, but not in all. I need something that is going to work everytime. If I could get each TD to scroll if the content is larger that would certainly suffice.
I do not have a link to provide, this is just a general question as I will have many areas on my site that I may need to use something like this.
Thanks
If you're using tables as backbone of you website, then you do it wrong. You should use div elements instead.
Tables should be use for tabular data, not for structure.
Sometimes it's quite hard to get fast the look as when used table, but it's not impossible. For 2-row table you can use something like this
<div id="container">
<div id="left">
<div id="right">
<div class="clr" >
</div>
CSS:
#container{
width: 640px;
}
#left{
width: 150px;
flot: left; /*if you want them to be next to each other */
overflow: scroll; /*or hidden?*/
}
#right{
width: 490px;
float: left;
overflow: scroll;
}
.clr {
clear: both;
}
I agree with both answers so far - the ideal solution is to re-code your layout without the table, but if you don't have time, wrapping your table cell content in a <div> will do the trick:
HTML
<table>
<tr>
<td class="left">
<div>This is your left content</div>
</td>
<td class="right">
<div>This is your right content</div>
</td>
</tr>
</table>
CSS
table {
width: 640px;
}
td div {
overflow: scroll;
}
td.left,
td.left div {
width: 150px;
}
td.right,
td.right div {
width: 490px;
}
The added <div>'s around your content will respect the CSS overflow property and prevent non-breaking content from blowing up your layout.
Since you are using fixed widths, it sounds like you need to set table-layout: fixed on your table element.

Categories