I have a 3 columned footer and I need all elements inside to be aligned vertically to the bottom. At the moment, the divs have are aligned to the top: http://jsfiddle.net/tmyie/SMtW6/1/
.col33 {
width: 33%;
float: left;
background-color: red;
font-size: 90%;
}
.col33 > ul, .col33 > p {
margin-bottom: 0;
padding-bottom: 0;
}
However, because this is just a snippet of a much larger site, I'm hesitant to make those floats into inline-blocks. Is there any markup or CSS I can add, to make the children of .col33 vertically align to the bottom?
Update the CSS of col33 to
.col33 {
width: 33%;
background-color: red;
font-size: 90%;
height: 100px;
display: table-cell;
vertical-align: bottom;
}
Here is the working example http://jsfiddle.net/SMtW6/3/
Update .col33 as mentioned below :
Remove float:left
Add display:table-cell
Add vertical-align:middle
Check below css for the same :
.col33 {
width: 33%;
background-color: red;
font-size: 90%;;
vertical-align:middle;
display:table-cell;
}
Fiddle
Related
I have a jsfiddle here: http://jsfiddle.net/apej60nL/
I have two columns in bootstrap. One column has text as content the other is empty apart from a yellow div that is repersenting an image.
I need to center the yellow div vertically against the text block. To do this I need to make the left div containing the yellow div the same height as the text div.
I have done this with
.test .row {
display: table;
}
.left, .right {
float: none;
display: table-cell;
vertical-align: top;
}
I positioned the yellow div absolutely and used negative margins to center it. I can do this because I know the width/height of the yellow div. I need to do this without knowing the width/height. The image/div could be different dimensions.
How can I center it vertically with knowing the size?
Make the top/right/bottom/left positions of the yellow block (image) zero, and the margin auto:
.block {
background: yellow;
position: absolute;
height: 150px;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;
width: 50px;
}
jsFiddle example
Without knowing the width/height, here is an example:
.block{
background: yellow;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%)
transform: translate(-50%,-50%)
}
Demo
I have made a couple of changes to your CSS to achieve what you're looking for:
.left, .right {
float: none;
display: table-cell;
//deleted vertical-align: top;
}
.left{
background: red;
vertical-align:middle; //replaced position: relative; with this
}
.right{
vertical-align: top; //add this
background: #ddd;
}
.block{
//various changes here, will be centered horizontally and vertically
background: yellow;
margin-left: auto;
margin-right: auto;
text-align: center;
}
JS Fiddle Demo
Note: if you want to constrain either the width of the block div then add a max-width style.
see it.
$(document).ready(function(){
var l=$('.left').height()-50;
var t=l/2;
$('.block').css('top',t);
});
http://jsfiddle.net/srvnk44/apej60nL/22/
vertical-align: middle works nicely with table cells, but I had to change the yellow box to display: inline-block:
.test .row {
display: table;
}
.left, .right {
float: none;
display: table-cell;
}
.left {
background: #F00;
vertical-align: middle;
text-align: center;
}
.right {
background: #DDD;
vertical-align: top;
}
.block {
background: #FF0;
display: inline-block; /* display changed to inline block */
text-align: left; /* text align is inherited so reset it */
}
Updated Fiddle
I have two DIVs inside a parent div. I want them to be:
So I searched for examples of this because it is such a trivial problem. I tried a few examples from SO but it didn't seem to make any difference for my example. I tried vertical-align: middle; and inline-block but without any success. Here is my fiddle.
http://jsfiddle.net/Sz2fU/1/
HTML
Play A
CSS
.parentBox
{
height: 100px;
}
.left_box
{
display: inline-block;
vertical-align: middle;
background:green;
float:left;
}
.right_box
{
width: 18%;
height: 100%;
display: inline-block;
vertical-align: middle;
background:blue;
float:right;
}
.inputBox
{
height:80px;
}
In order for vertical-align to work in a table we will have to use table-cell
Try this:
Add display:table; and width:100%; to .parentBox
Remove float from .left_box and .right_box
Add display: table-cell; and text-align:center; to .left_box and .right_box
You needed to add text-align:center; to center the input to the middle.
JSFiddle Demo
More info here for vertical alignment.
Note: IE7 and below do not support display:table; or display: table-cell;
The trick here is to use display: table for the parent div and display: table-cell for the children; otherwise, vertical-align is not respected.
JSFiddle: DEMO
.parentBox {
width: 100%;
height: 100px;
border: 1px solid lime;
display: table;
}
.left_box,
.right_box {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.left_box {
background:green;
}
.right_box {
width: 18%;
height: 100%;
background:blue;
}
.inputBox {
height:80px;
}
Add line-height: 100px to the parent div. Vertical-align:middle refers to line-height, so setting it up to the height of the block will do the job. Just don't forget to reset line-height to normal on children (otherwise, they will be with line-height: 100px too and if text in it more than one line you get huge block).
Why the second DIV when using display: inline-block is pushing downward?
Here is my code what I have tried.
HTML
<div class="div1"></div><div class="div2"></div>
CSS
.div1{
width: 400px;
height: 500px;
background: #F00;
display: inline-block;
}
.div2{
width: 300px;
height: 200px;
background: #00F;
display: inline-block;
}
jsFiddle: http://jsfiddle.net/enve/fbreJ/
I know that it works using float: left, but I can't use it in what I am trying to do.
Because that's the way inline-block elements work.
To fix that, just add a vertical aligment:
.div2 {
vertical-align: top;
}
jsFiddle Demo: http://jsfiddle.net/enve/fbreJ/1/
I have div tag, in him is span and img tags, I want that span and img will be as vertical center for div, I am truing this but for span tag margin-top not works and I can not centering span tag. What is solution?
<div>
<span>
some text
</span>
<img src="..." />
</div>
css:
div {
width: 200px;
height: 40px;
background: #ccc
}
span {
margin-top: -10px;
}
img {
width:20px;
height: 20px;
margin-top: 10px;
}
this is demo http://jsfiddle.net/Q9utY/4/
Try this with padding
div {
width: 200px;
padding: 20px;
background: #ccc
}
img {
width:20px;
height: 20px;
vertical-align: middle;
}
http://jsbin.com/isijop/1/
and here we can use line-height with height
div {
width: 200px;
height: 40px;
line-height: 40px;
background: #ccc
}
img {
width:20px;
height: 20px;
vertical-align: middle;
}
http://jsbin.com/apawog/1/
Span is by default inline element, so margin doesn't affect it.
to fix this, add display:block or display:inline-block to span.
But personally I don't think this is the best way to do it. Here is some article with 6 ways of doing it.
6 Methods For Vertical Centering With CSS
Add vertical-align:middle for img class.
vertical-align:middle;
Try here
http://jsfiddle.net/Q9utY/4/
I have a header on my site, and this has a container and three divs.
The heading container is 100px high.
The first div floats to the left and has a width of 150px
The second div floats to the right and has a width of 150px
The third div has another div inside it, and by default resizes to fill the remaining space.
I want the third div to center vertically. When I add display: table-cell and vertical-align: middle the div shrinks to the size of the text. I can only resize the div using a fixed size.
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
display: table-cell;
vertical-align: middle;
height: 100px;
text-align: center;
width: auto;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
Can anyone let me know how I can center the middle div without knowing the exact width?
If I take out the display: table-cell from the heading class it is no longer centered vertically but is horizontally.
I think this might be what you're looking for... I changed div.header in the css to have padding on top, removed the table-cell and also set the margin to auto instead of width auto. See if this is what you were hoping for. You will have to adjust the padding on top depending on the spacing but this seems like the easiest way to me.
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
height: 100px;
text-align: center;
margin: auto;
padding-top:40px;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
<div id="headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
I have now found an answer that works for me.
First a small change to the HTML (two extra divs in the heading):
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading"><div><div>Content to be centered horizontally and vertically<div></div></div>
</div>
Then change to the CSS:
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
background-color: #000;
margin-bottom: 10px;
width: 100%;
height: 100px;
}
div.heading
{
display: table;
border-collapse: collapse;
width: 100%;
height: 100px;
position: absolute;
}
div.heading div
{
display: table-row;
}
div.heading div div
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
This allows the final div contain the text to be both centered vertically and also horizontally. The help came from another Stack Overflow question I found after more searching - 818725.
try this http://jsfiddle.net/KtgVN/20/