Given this basic 3 columns layout,
.wrapper {
display: table;
width: 100%;
}
.wrapper>div {
display: table-cell;
}
.center {
padding-top: 3em;
}
<div class="wrapper">
<div class="left">uno</div>
<div class="center">dos</div>
<div class="right">tres</div>
</div>
When adding padding-top to the .center div, the others also display it. How do I add a padding-top to the center div alone?
Its easy: Try to do the following:
.wrapper {
display: table;
width: 100%;
}
.wrapper>div {
display: table-cell;
vertical-align:top; // Add this line :)
}
.center {
padding-top: 3em;
}
When you use display: table-cell in a div, the div will align vertically to the center... so by doing vertical-align:top you will force all the divs align vertically to the top and then the center div will assume the padding as you desire.
Related
I have this following html code in my page:
<div class="container"> (Can't have static height)
<img></img> (Has variable height)
<label></label> (Has variable length)
</div>
I want to align both of them in a same line vertically applied in any browser. If it's possible by a standard way how should I work?
I have searched and read a lot of articles to fix this problem but it wasn't worked.
Edit: The "container" div in this case isn't the main container div in page and it has 3 other parents above itself that they have no effect on position of it.
You can use flex by adding :before and :after with flex:1 which will make the image/text always in the center. Then you can use flex again for image and text to make them aligned in the same line like this:
Go full page to see the result better
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.page {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}
.page:before,
.page:after {
content: " ";
flex: 1;
}
.container {
display: flex;
align-items: center;
}
label {
padding: 5px;
}
<div class="page">
<div class="container">
<img src="https://lorempixel.com/200/200/">
<label>text</label>
</div>
</div>
You could use text-align, display and line-height like the following:
<style>
.container{
text-align: center;
}
.container label{
display: block;
line-height: 0; /*To stick the label under the bottom edge of the image*/
}
.container img{
display: inline-block;
}
</style>
Checkout this DEMO
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/
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
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