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
Related
This question already has answers here:
How can I vertically center text in a dynamically height div?
(10 answers)
Closed 7 years ago.
as said in the title all i need is centering vertically a title h1 in the middle of a div.
this is a very simple code :
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
}
h1{
vertical-align:middle;
}
This is a demo here
After using display table, the text is nicely centered vertically, thank you All. Now i'm facing a new problem; (look at the jsffidle here please
What i want is "text 1" and "text 2" will be displayed side by side, and every small blue div goes under the two red divs in the middle of every red div.. any help please ?
Solution #1
Add display:table; to container and display:table-cell; to h1
.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
display:table; /* <---- */
}
h1{
vertical-align:middle;
display:table-cell; /* <--- */
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
display: table;
}
h1 {
vertical-align: middle;
display: table-cell;
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
Solution #2 : Flexbox
.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
display: flex;
align-items: center; /* align vertical */
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
/* align vertical */
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
Solution #3 - Transforms
h1
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
}
h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
Solution #4 Add a Pseudo element with 100% height
.container:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* to counter inline-block whitespace */
}
h1 {
display: inline-block;
vertical-align: middle;
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
}
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
/* to counter inline-block whitespace */
}
h1 {
display: inline-block;
vertical-align: middle;
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
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'm trying to create a really basic layout with two divs. The idea is to have one div to the left and the other to the right in the same line. However they don't have the same height.
Why is the smaller div aligned to the bottom instead of to the top? Is not that the expected behavior within the page flow?
<body>
<div>
<div class="left debug-green"></div>
<div class="right debug-red"></div>
</div>
</body>
body {
font-size: 0;
}
.left {
width: 50%;
height: 30px;
display: inline-block;
}
.right {
width: 50%;
height: 20px;
display: inline-block;
}
.debug-red {
background-color: rgb(255, 0, 0);
}
.debug-green {
background-color: rgb(0, 255, 0);
}
This is a js fiddle sample:
http://jsfiddle.net/3nAsx/
add to the right div
vertical-align: top;
Most browsers render inline-block element with default vertical-alignment value and that value is: baseline
vertical-align values:
vertical-align: baseline /* keyword values */
vertical-align: sub
vertical-align: super
vertical-align: text-top
vertical-align: text-bottom
vertical-align: middle
vertical-align: top
vertical-align: bottom
vertical-align: 10em /* <length> values */
vertical-align: 4px
vertical-align: 20% /* <percentage> values */
vertical-align: inherit
You can replace the display:inline-block; declarations with float:left;. Since you're specifying the dimensions anyway, you don't need inline-block property. Here's how it looks like after I made the change.
Code
.left {
width: 50%;
height: 30px;
float:left;
}
.right {
width: 50%;
height: 20px;
float:left;
}
vertical-align: top;
Is good option.
But if you just want one div on left and other on right.
Give float: left to left div and float : right to right div
This way is good short coding
<div class="wrap">
<div class="left debug-green"></div>
<div class="right debug-red"></div>
</div>
.wrap div{
width: 50%;
height: 30px;
display: inline-block;
background-color: green;
float:left;
vertical-align:top;
}
.right {
height: 20px !important;
background-color:red !important;
}
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
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