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
Related
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 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
the title pretty much sums it up. I have the following code:
<div class="container">
<p>Hello world</p>
</div>
And CSS:
.container{
width: 100%;
height: 50px;
background-color: lightblue;
vertical-align: middle; /* Why you no work!?!? */
}
But the text is not vertically aligning in the div. I'm clearly missing something here or don't understand a certain concept. Anybody tell me what's happening?
Thanks!
if you have single line text add this to your css.
.container > p{
line-height:50px;
}
To use vertical-align: middle, you need to use display: inline-block.
Your code will change to this:
.container{
display: inline-block; /* This is the line you need to introduce */
width: 100%;
height: 50px;
background-color: lightblue;
vertical-align: middle;
}
You can take a look at the demo.
Update
Using display: table for .container and display: table-cell for .container p makes it work.
Updated demo
.container{
display: table;
width: 100%;
height: 200px;
background-color: lightblue;
vertical-align: middle;
}
.container p {
display: table-cell;
vertical-align: middle;
}
Vertical alignment in CSS is not as straightforward as horizontal alignment.
Depending on your case and the content you need to apply one technique or another.
You can check this link for different techniques:
http://www.vanseodesign.com/css/vertical-centering/
In short, vertical-align: center; is not going to work in your case
Add to your container the display property as follows:
.container{
width: 100%;
height: 50px;
background-color: lightblue;
display:inline-block;
vertical-align: middle;
}
When I try to vertical align centered inner DIV my centering isn't working...
What's my problem here?
CSS Code:
#page_bar
{
width: 100%;
height: 30px;
background-color: white
}
.page_bar
{
width: 800px;
height: 30px;
display: table-cell;
vertical-align: middle
}
HTML Code:
<div id="page_bar">
<div class="page_bar">
Mapa Strony
</div>
</div>
EDIT: I want inner DIV to be centered, not the text in inner DIV...
EDIT: Look at: http://mistic-miners.comule.com/index.html the silver area must be centered which means the inner div must be centered not the text inside of inner div.
It looks like you may need to wrap the .page_bar class in order to get it to center horizontally with the table-cell display.
#wrap{
margin: 0px auto;
display:table;
}
#page_bar
{
width: 100%;
height: 30px;
background-color: white
}
.page_bar
{
width: 800px;
height: 30px;
display: table-cell;
text-align: left;
vertical-align: middle;
margin: 0px auto;
}
<div id="page_bar">
<div id="wrap">
<div class="page_bar">
Mapa Strony
</div>
</div>
</div>
This will be centered vertically and horizontally:
#page_bar
{
width: 100%;
height: 100px;
background-color: black;
text-align: center;
}
.page_bar
{
width: 800px;
height: 100px;
display: table-cell;
vertical-align: middle;
color: white;
}
jsfiddle: http://jsfiddle.net/DgwwB/2/
if you add text-align:center; to #page_bar ?
vertical-align: middle
I think you forgot a ';' on this. Also give 2~3px space 30-27 or 33-30
I've had this issue and after wasted time on faffing about I finally found the obvious simple fix.
If you apply 'display:table-cell' to an element, apply 'display:table' to the parent, this will make vertical aligning work the way you expect it to.