How to align vertically content inside #container which has a display of table-row;?
_#content may have inline or block element or even a child with fixed height. It just need to be aligned vertically no matter how.
The bottom div should always be at the bottom of the screen and the height of the top div should be equal to the remaining height.
<div id="container">
<span>content</span>
<div>content</div>
</div>
<div id="wrap">
<img src="http://www.boylesoftware.com/blog/wp-content/uploads/2014/07/280x250_css3_logo.jpg" height="100">
</div>
body {
padding: 0;
margin: 0;
color: #fff;
font: 18px "bonvenocf";
height: 100%;
background: #ccc;
max-height: 1080px;
position: relative;
display: table;
width: 100%;
}
html {
height: 100%;
max-height: 1080px;
}
#wrap {
text-align:center;
background: #1b1b1b;
width: 100%;
display: table-row;
}
#container {
width: 100%;
background: #0084ff;
height:100%;
display: table-row;
}
This is my fiddle: http://jsfiddle.net/4tvjvwpk/3/
vertical-align is only applicable to inline-level and table-cell elements.
Hence you could add a div and change its display type to table-cell and add vertical-align: middle to the element as follows:
EXAMPLE HERE
<div id="container">
<div class="cell">
<span>content</span>
<div>content</div>
</div>
</div>
.cell {
vertical-align: middle;
display: table-cell;
}
You shouldn't have content in a table-row. Instead, make it a table-cell. But maybe you should look into Flexbox for creating what you are looking for.
Reference: CSS Tricks
Related
I am building on the question originally asked here How to center horizontal table-cell with a slight modification.
Basically, DIVs need to be centered as they are now, however, I also need to vertically align all the content in the cell in the middle.
Changing vertical-align: middle; for .column does NOTHING. If I change display: inline-block; for .column to display: table-cell, it will align content in the middle, but then .column DIVs are no longer centered and widths are all broken (currently all a evenly set to 25%). Setting margin:auto; or text-align on parent does nothing.
I've been running around this for days. Your help is appreciated.
/* Setting the container to be a table with maximum width and height */
#container {
display: table;
height: 100%;
width: 100%;
}
/* All sections (container's children) should be table rows with minimal height */
.section {
display: table-row;
min-height: 1px;
}
/* We need one extra container, setting it to full width */
.columns-container {
display: table-cell;
height: 100%;
width:100%;
text-align: center;
}
/* Creating columns */
.column {
display: inline-block;
vertical-align: middle;
min-height: 150px;
width: 25%;
text-align: left;
}
#a {
background-color: pink;
}
#b {
background-color: lightgreen;
}
#c {
background-color: lightblue;
}
<div id="container">
<div class="section">
<div class="columns-container">
<div class="column" id="a"> Contents A </div>
<div class="column" id="b"> Contents B </div>
<div class="column" id="c"> Contents C </div>
</div>
</div>
</div>
You could do it like the follows, it uses CSS3 Transforms, see the browser support details. And be aware of the white spaces thing on inline block.
JsFiddle demo
.container {
text-align: center;
margin: 0 auto;
}
.column {
display: inline-block;
width: 150px;
height: 150px;
}
.column > div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#a { background-color: pink; }
#b { background-color: lightgreen; }
#c { background-color: lightblue; }
<div class="container">
<div class="column" id="a"><div>Contents A</div></div>
<div class="column" id="b"><div>Contents B</div></div>
<div class="column" id="c"><div>Contents C</div></div>
</div>
setting your .column's line-height to the height of the element is step one; so: line-height:150px vertically aligns the content.
Then, simply edit the text-align:left style declaration you have set on .column to text-align:center finishes the vertically alignment in this case.
here's a fiddle:
http://jsfiddle.net/jalbertbowdenii/t2xgL3rm/
I want to position the content of these two divs to the top.
HTML
<div class="menu">
<div></div>
</div>
<div class="content">
<h1>SDFSDFSD SDFSD</h1>
<h1>SDFSDFSD SDFSD</h1>
<h1>SDFSDFSD SDFSD</h1>
</div>
css
.
menu {
display: table-cell;
background-color: yellow;
width: 20%;
}
.menu > div {
padding: 20px;
background-color: red;
vertical-align: top;
}
.content {
display: table-cell;
background-color: blue;
width: 80%;
}
http://jsfiddle.net/99u4vm3g/
I tried with vertical-align: top and with position: absolute and top:0 with no luck.
What should I do to send those content to the top of their containers?
Thanks in advance!
You added vertical-align:top to the wrong place, it should be applied to the table-cell elements.
Updated: http://jsfiddle.net/tfqmwko1/
You need to put the vertical-align on the table-cell elements
.menu {
vertical-align: top;
}
.content {
vertical-align: top;
}
http://jsfiddle.net/99u4vm3g/1/
You are going to see the text still not at the top and that is due to the margin on the header elements
This one has no margin on the header tags http://jsfiddle.net/99u4vm3g/2/
you can see the issue in Safari on this page: http://mknepprath.com/lab/pyrus/safari_bug.html
The "See Our 2015 Graduation Lookbook" section is vertically centered in every browser except this one. I've tried quite a few ideas I've found on here, but nothing seems to work... Here's a codepen with the example below: http://codepen.io/mknepprath/pen/WbBWBQ
Here's my SSCCE:
<style>
.square {
width: 34%;
height: 0;
padding-bottom: 30%;
float: left;
position: relative;
background: red;
}
.table {
display: table;
position: absolute;
min-height: 100%;
height: 100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
.content {
width: 200px;
height: 20px;
background: yellow;
}
</style>
<div class="square">
<div class="table">
<div class="table-cell">
<div class="content"></div>
</div>
</div>
</div>
I want the square to scale proportionally when the browser width is decreased, so I'm currently using a padding technique, where the height of .square is set to 0, and the padding bottom is set with a percentage. An example of this is the second answer here: How to style a div to be a responsive square?
The div within that is set to display: table, and then the one within that is set to display: table-cell; vertical-align: middle. These are enough for all browsers except Safari. Any ideas?
Thanks!
I have a simple example in which an outer DIV contains an inner DIV which has
display: inline-block;.
Because I have set the height of the inner div, I expect the outer div to take on the same height as the inner div. Instead, the outer div is slightly taller, as you can see from the fiddle. Question: Why is this happening and how can I "fill up" the outer div without setting its height explicitly?
My goal is to have the outer div expand and shrink based on the height of the inner.
.outer {
background-color: red;
}
.inner {
display: inline-block;
width: 480px;
height: 140px;
background-color: green;
}
<div class="outer">
<div class="inner"></div>
</div>
Your .inner div has display: inline-block. That means it needs an inline formatting context around it. Inline layout produces struts, which make room for descenders. You can see how it fits if you put a character next to the .inner element: http://jsfiddle.net/bs14zzeb/6/
The default vertical-align is to have the bottom edge of the inline-block box lined up with the baseline of the surrounding text. Even if there is no surrounding text, the layout engine still has to make room for an entire line of text.
That's why these answers are suggesting that you play with the vertical-align property. Setting it to vertical-align: top, as one answer suggests, tells the layout engine to align the top edge of the inline-block box with the top edge of the line box. Here, since the line height is less than 140px tall, it gets rid of the extra space on the bottom. But if the height of a line is taller than that, you'll still have extra space underneath: http://jsfiddle.net/bs14zzeb/9/
When using inline-block don't forget to set a vertical-align property MDN
.outer {
background-color: red;
}
.inner {
display: inline-block;
vertical-align: top; /* tada!!!! */
width: 480px;
height: 140px;
background-color: green;
}
<div class="outer">
<div class="inner"></div>
</div>
Alternatively, use CSS flex:
.outer {
display: flex;
background-color: red;
}
.inner {
width: 480px;
height: 140px;
background-color: green;
}
<div class="outer">
<div class="inner"></div>
</div>
The default vertical alignment for inline elements is baseline, so you need to set it to top or middle:
.outer {
background-color: red;
}
.inner {
display: inline-block;
width: 480px;
height: 140px;
background-color: green;
vertical-align:top;
}
<div class="outer">
<div class="inner"></div>
</div>
It's because your #inner has a display property set to inline-block. To fix, change the display to block, or set the vertical-align property to top.
display: inline-block:
.outer {
background-color: red;
}
.inner {
width: 480px;
height: 140px;
background-color: green;
}
<div class="outer">
<div class="inner"></div>
</div>
vertical-align: 0:
.outer {
background-color: red;
}
.inner {
display: inline-block;
vertical-align: top;
width: 480px;
height: 140px;
background-color: green;
}
<div class="outer">
<div class="inner"></div>
</div>
The problem is the display: inline-block; property. Try display: block; instead.
http://jsfiddle.net/bs14zzeb/7/
.outer {
line-height: 0px;
}
.outer{font-size:0} will do the job
.outer {
background-color: red;
font-size:0
}
.inner {
display: inline-block;
width: 480px;
height: 140px;
background-color: green;
}
<div class="outer">
<div class="inner"></div>
</div>
I have a full width wrapper div. Inside it, there's another div set as display: table.
I've set the wrapper as text-align: center, but the table div is not getting centered. Why is that? What am I missing here in order to center the display: table div horizontally inside the wrapper?
See JsFiddle here
<div class="wrapper">
<div class="tb">
<div class="tb-cell">1</div>
<div class="tb-cell">2</div>
<div class="tb-cell">3</div>
</div>
</div>
CSS:
.wrapper {
width: 100%;
background: #E0E0E0;
text-align: center;
}
.tb {
display: table;
width: 100px;
background: silver;
}
.tb-cell {
display: table-cell;
}
Add this to the class:
.tb {
display: table;
width: 100px;
background: silver;
margin: auto;
overflow: hidden;
}
Demo: http://jsfiddle.net/gpq95d26/3/
The problem is that
The text-align CSS property describes how inline content like
text is aligned in its parent block element.
Then, it can't center an element with display: table, because that isn't inline content.
But you can use inline-table instead:
.tb {
display: inline-table;
}
Demo