I've read some articles on the internet stating that if an element is one of the following display types: inline, inline-block, or table-cell, then vertical-align should work. I created this Fiddle to check it out, but this doesn't seem true.
What are the ULTIMATE requirements that when followed, vertical-align always works?
Here is my Fiddle.
Use display: table-cell and vertical-align: bottom on the outer div:
.a1{
height: 300px;
background: #ccc;
display: table-cell;
vertical-align: bottom;
}
.a2 {
height: 20px;
background-color: #f00;
}
JSFiddle
Use relative/absolute positioning instead of vertical-align.
.a1{
height: 300px;
position: relative;
background-color: green;
}
.a2 {
height: 20px;
display: inline-block;
background-color: #f00;
vertical-align: bottom;
position:absolute;
bottom:0;
left:0;
}
DEMO
Related
I am trying to align image inside DIV horizontally and vertically. Problem is that I tried several methods and none of them worked for me.
This is code that I am using:
CSS
img{
max-width:100%;
vertical-align: middle;
}
#slika {
float: center;
height: 126px;
width: 111px;
text-align: center;
}
HTML
<div id="slika">
<img src="images/2105602.png" width="auto" height="auto" alt="2105602.png">
</div>
jsfiddle: HERE
Can soemone share his thoughts with me? I can't find solution. It always stays aligned at top.
JSFiddle - DEMO
img {
max-width:100%;
top: 50%;
position: relative;
transform: translateY(-50%);
}
#slika {
height: 126px;
width: 111px;
text-align: center;
border: 1px #000 solid;
}
You can do it by adding a margin of 50% and then a top of -(imageheight/2)
img{
max-width:100%;
vertical-align: middle;
margin-top:50%;
position:relative;
top:-37px;
}
#slika {
float: left;
height: 126px;
width: 111px;
text-align: center;
border:1px solid red;
}
fiddle here: http://jsfiddle.net/dduygx0x/2/
Here is my soluton for your problem using the common table - table-cell way:
I wrapped you image in a new div:
<div id="slika">
<div class="img-wrapper">
<img ....>
</div>
</div>
and altered the CSS:
img{
max-width:100%;
}
.img-wrapper{
display: table-cell;
vertical-align: middle;
}
#slika {
display: table;
float: left;
height: 126px;
width: 111px;
text-align: center;
vertical-align: middle;
}
img{
max-width:100%;
}
.img-wrapper{
display: table-cell;
vertical-align: middle;
}
#slika {
border: 1px solid black;
display: table;
float: left;
height: 126px;
width: 111px;
text-align: center;
vertical-align: middle;
}
<div id="slika">
<div class="img-wrapper">
<img src="http://tommyvirtualnikatalog.com.hr/images/akcija/prehrana/2105602.png" width="auto" height="auto" alt="2105602.png">
</div>
</div>
The benefit of this solution ist that it ist absolut dynamical an can easely made responsive!!
instead of positioning it with hard-coded properties (which would change depending on the image) or using the transform property which wont work in older browsers you can simply wrap the image in a p and set the line-height to match the height of the box
p{
line-height: 126px;
margin: 0;
padding: 0;
}
JSFIDDLE
A solution I've often used is adding an empty span element next to the image, with
#slika span {
display: inline-block;
height: 100%;
vertical-align: middle;
}
The idea is that vertical-align is relative to its siblings, therefore a lone element has nothing to work with. The upside of this method is that its completely dynamic, no fixed pixels, works in older environments ( make sure to test that it meets your lowest-end requirements ) and does not affect the container div. The downside would be the extra html.
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).
I've got this structure:
<div id="preview">
<div class="small">preview</div>
<div id="prev_content"></div>
</div>
and the following CSS rules:
#preview {
position:absolute;
display: table;
top:160px;
left:10px;
width:457px;
height:125px;
max-width: 457px;
max-height: 125px;
border-radius: 20px;
background-image:url(../images/preview_greetings.png);
color: #FFF;
font-family: shofar;
font-size:27px;
padding-right:130px;
padding-left:20px;
overflow: hidden;
}
#preview div.small{
position: absolute;
top:-40px;
left:0px;
text-align: center;
width:607px;
color:black;
font-size:30px;
}
#prev_content{
max-width: 100%;
overflow: hidden;
max-height: 102px;
display: table-cell;
vertical-align: middle;
}
but for some reason, if I have overflow text, it just keeps expanding the div and doesn't stop.
Here's a fiddle:
http://jsfiddle.net/sTGpf/
How can I make it stop growing when it has reached it's limitation? The reason im using table display is because I need vertical alignment.
display:table-cell is causing the height to expand based on content. Use a wrapper around the div and set the required style for vertical alignment. And for the DIV with actual content, set the max-height:102px;
#prev_content{
max-width: 100%;
max-height:102px;
}
#wrapper
{
vertical-align:middle;
display:table-cell;
max-height:102px;
}
Fiddle
Instead of using display: table to center, you could use Centering in the Unknown.
Demo
#preview {
height:125px;
font-size:0; /* To avoid extra spaces */
}
#preview:before {
content: '';
height: 100%;
}
#preview:before, #prev_content {
display: inline-block;
vertical-align: middle
}
#prev_content{
overflow: hidden;
max-height: 102px;
font-size: 27px;
}
Remove display: table-cell; from #prev_content and it will respect the max-height: 102px;
Demo: http://jsfiddle.net/sTGpf/3/
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/