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
Related
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.
I have the following HTML:
<div class='container'>
<div class='first'>test</div>
<div class='second'>test</div>
</div>
accompied by the following CSS:
.container {
display: table;
width: 90%;
background: yellow;
}
.first {
display: table-cell;
background: red;
}
.second {
display: table-cell;
background: blue;
}
(Also: http://codepen.io/zssz/pen/GodBqQ)
How can I achieve that the second/blue div sits right below the first/red div, by ONLY changing the CSS of .second?
Thank you
(I have no control over the container CSS in this situation)
You can do this:
CSS
.second {
display: table-row;
background: blue;
}
DEMO HERE
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/
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
I've tried to use display: table in the parent div and display: table-cell in the child div as seen here but I can't seem to get the image vertically aligned. What am I doing wrong?
Here is my code:
HTML:
<div class="body_splash">
<img src="https://upload.wikimedia.org/wikipedia/
commons/thumb/a/a3/Cc.logo.circle.svg/64px-Cc.logo.circle.svg.png"/>
</div>
CSS:
.body_splash {
width: 378px;
float: left;
display:table;
height: 400px;
background-color: #eaeaea;
}
.body_splash img {
display: table-cell;
vertical-align: middle;
}
Thanks in advance.
Try DEMO
<div class="table">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Cc.logo.circle.svg/64px-Cc.logo.circle.svg.png"/>
</div>
</div>
.table {
display: table;
float: left;
width: 378px;
height: 400px;
background-color: #eaeaea;
}
.table > div {
display: table-cell;
vertical-align: middle;
}
If the box is a fixed size, use this: Demo 1.
It absolutely positions the image inside the box.
Also look at these:
Demo 2
Demo 3