I'm trying to vertically align using the table/table-cell method.
JSFiddle
<div class="row">
<div class="small-6 columns valign">vertically align me</div>
<div class="small-6 columns"><p>content</p>.....</div>
</div>
.row{
display: table;
}
.valign{
display: table-cell;
vertical-align: middle;
background: grey;
height: 100%;
}
But it's not working, where am I going wrong? I suspect it is something to do with the height of the valign column. How can I get this to stretch to the height of it's parent?
I should also mention in my actual code I have the code nested quite deep in the page, so it's inside article and section tag and another div too.
On some browsers CSS property float does not work with display: table-cell so you should set float: none to table-cell elements in order to make them act like table cells
https://jsfiddle.net/zac926wL/5/
Related
I know how to vertical align the text by reducing the height of inner div and assigning it absolute positioning with top,bottom,left,right= 0,margin:auto properties
I also know display:flex layout but it also does not work properly.
problem is display:table and vertical-align does not work properly with bootstrap classes. My div is simple i assigned it proper height , my inner div has reduced height so it should vertically align but it does not. I used bootstrap. I do not want to use absolute position to center it. Any idea?
<div class="col-sm-3" style="height:65px;display:table;vertical-align:middle;">
<div style="display:table-cell;vertical-align:middle">abcabcabc</div>
</div>
When you are using bootstrap, vertical align is done with "display: inline block"
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
You can check here - http://plnkr.co/edit/vPKRjAf4wgtzJ7VVdOPN?p=preview
what about using line-height? if line-hight is equal to its hight the text is centered vertically
#test {
width: 100%;
height: 100px;
background-color: green;
line-height: 100px;
font-size: 32px;
text-align: center;
}
<div id="test">
Test Text
</div>
Hope this helps
Problem was with my div , i set its dimensions upon removing stuff, things worked out. Thanks.
I have a number of "rows" which I want to have grouped together and centered in their container, somethign like this:
However, the number of rows is variable, and if there are enough rows to overflow a set height, I want it to scroll.
The best way I have found to get it to center the rows properly is to use the following css on the container:
.container {
display: table-cell;
vertical-align: middle;
}
However, since the container doesn't have display:block, setting overflow:auto doesn't work. Putting a scrolling div inside the table cell doesn't work either, because the scrolling div needs to have a set height, and that destroys the vertical centering.
After much experimentation, I have finally arrived at the following solution:
html:
<div class="scroll">
<div class="table">
<div class="container">
<div class="row" ></div>
<div class="row" ></div>
...
</div>
</div>
</div>
css:
.scroll {
overflow-y: auto;
height: 80px;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
See http://jsfiddle.net/ZCdPG/ for a full implementation.
Although it works, it is unfortunate that it requires three levels of nesting for a single container. Web components would somewhat alleviate this, but the real problem is that there is no real support for vertical centering in CSS, and a common use case can only be achieved with hacks.
So I have a flex-box, or more precisely only a box (display: box) since that's what Sass Compass generates.
I want it to:
base it's height on its content
make the "columns" stretch so that their backgrounds fill the entire parent
have the content of the columns vertically centered.
Like so:
see it on jsbin
The problem is that requirement 2 and requirement 3 in the list above collide. I can have the content vertically centered with box-align: center but to have the backgrounds stretch I must use box-align: stretch.
In the example above I'm using
#div1 { display: table; height: 150px; }
#div1 > div { display: table-cell; vertical-align: middle; }
The problem is that I can't specify a fixed height since the height is decided by the content of the 3rd column (lime).
Any way to solve this without javascript? Nested flex-boxes (tried but can't get to work)? display: table as above?
I don't see the need for the flex box css if you are just trying to get three columns of equal height, that grow with the content and have vertical alignment
If you just use the following structure
<div class="table">
<div class="cell" id="cell1"></div>
<div class="cell" id="cell2"></div>
<div class="cell" id="cell3"></div>
</div>
You can use these styles:
.table {display:table; width:100%;}
.cell {display:table-cell; vertical-align:middle; width:33.33%;}
Example
I am trying to create something like a gallery that shows different number of images per row based on the width of the browser. This has already been achieved using overflow: hidden in the outer div and float: left in the inner div.
However, what happens with this is that my images are always aligned to the left, leaving alot of whitespace on the right. How do I make it such that the gallery is always centered in the screen no matter how many images there are per row.
My code is on http://codepen.io/anon/pen/KzqAs
Thank you very much. :)
How about this: http://codepen.io/anon/full/mtBbF
HTML
<div class="container">
<div class="red box">red</div>
<div class="blue box">blue</div>
<div class="black box">black</div>
</div>
CSS
body{
text-align:center; /*You would need to define this in a parent of .container*/
}
.container{
display: inline-block;
margin: 0 auto;
text-align: left;
}
.box {
width: 300px;
height: 300px;
float: left;
}
Demonstration
You need to use an id(or class) on the main div. Set width: 300+px and margin: auto
Also your boxes should be with display: inline-block to allow them to begave "inline"
I have changed colors of the boxes a bit for better visibility.
So, on my website I'm trying to make this here http://prntscr.com/vk3cv.
The text, as you can see, isn't centered. I have the following code in my HTML
http://prntscr.com/vk3iy, and this in my CSS prntscr.com/vk3ml.
But, it doesn't seem to center it. I have had a friend help me out with that code.
The code I had before made it was just aligned to the left. I was wondering how would I make it so that it is completely centered?
In the code I had before, the html was changed from DIV class="row"
to DIV class="row feature"
And in CSS I didn't have that feature thing added.
The basic options
Give the container a fixed width and margin:0 auto;
Put the container in an HTML table cell (or a similar set of nested divs using CSS tables) and give the table cell text-align:center;
Use JavaScript or jQuery
If the container has a variable width, then you'll need #2 or #3.
If you decide on #2, it's more semantically-correct to use CSS tables in this case (favor HTML tables for data grids, and CSS tables for layout) (see the last few paragraphs here). Both are a reasonable option. But if you need support for IE7 or earlier, then you'll have to use HTML tables.
Auto margin
.feature {
width: 600px;
margin: 0 auto;
}
.feature .3u {
width: 200px;
}
CSS table
<div class="table">
<div class="row">
<div class="cell">Content goes here</div>
</div>
</div>
...
.table {display: table;}
.row {display: table-row;}
.cell {display: table-cell; text-align: center;}
.feature {display: inline-block; text-align: left; width: auto;}
You can use text-align: center; in the stylesheet in the div that is used to hold the text, to center the text.