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;
}
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 need to align an image and a heading vertically to the middle. Both need an absolute left margin.
For the last 3 hours I have tried to achieve both requirements, but I only get the objects properly aligned OR proper margins. How do I make the image and heading vertically aligned with absolute margins?
This is what I have in mind, but it seems I can only use float OR vertical-align with img.
.top {
line-height: 50px;
}
.top img {
margin-left: 15px;
vertical-align: middle;
float: left;
}
.top h1 {
margin-left: 65px;
vertical-align: middle;
display: inline;
}
-
<div class="top">
<img src="http://www.w3schools.com/images/compatible_chrome.gif" />
<h1>Text aligned vertically with the image + absolute left margin</h1>
</div>
See my JSFiddle experiments.
EDIT:
Here's an image of what I'm trying to achieve. The text has to be right next to the icon (absolute margin, not relative) and the icon + text need to be vertically centered.
The image size is not static which is why I need the text position to be absolute from the left edge.
your corrected code
css
.top {
line-height: 50px;
}
.top img {
margin-left: 15px;
vertical-align: middle;
}
.top h1 {
margin-left: 65px;
vertical-align: middle;
display: inline-block;
}
Use this:
css:
.fragment {
border: 1px blue solid;
margin: 5px;}
.top {
background-color: #ccc;
width: 100%;}
.top img {
margin-left: 15px;
vertical-align: middle;}
.top h1 {
margin-left: 65px;
vertical-align: middle;
display: inline;}
.top2 {
background-color: #ccc;}
.top2 img {
float: left;
margin-left: 15px;
vertical-align: middle;}
.top2 h1 {
margin-left: 65px;
vertical-align: middle;}
HTML
<div class="fragment">
<div class="top2">
<table>
<tr class="top">
<td>
<img src="http://www.w3schools.com/images/compatible_chrome.gif" />
</td>
<td>
<h1>[X] Image and text aligned properly, [ ] 65px absolute margin-left</h1>
</td>
</tr>
<tr class="top2">
<td>
<img src="http://www.w3schools.com/images/compatible_chrome.gif" />
</td>
<td>
<h1>[ ] Image and text aligned properly, [X] 65px absolute margin-left</h1> </td>
</tr>
</table>
</div>
</div>
EXAMPLE: http://jsfiddle.net/76ftL/7/
You can use absolute positioning on the image as follows.
CSS
.fragment {
border: 1px blue solid;
margin: 5px;
}
.top {
background-color: #ccc;
width: 100%;
position: relative;
line-height:50px;
}
.top img {
margin-left: 15px;
position: absolute;
top:50%;
-webkit-transform:translateY(-50%);
}
.top h1 {
vertical-align: middle;
display: inline-block;
margin-left: 65px;;
}
This is the 'magic' part
top:50%;
-webkit-transform:translateY(-50%);
Firstly we put the image halfway down the wrapper BUT translate it back up 50% of it's own height regardless of what that height is.
JSfiddle Demo
http://jsfiddle.net/dsUnc/
However when I replace an img tag with text - elements are positioned like expected (next to each other with the same height).
Happens on all browsers.
How to fix it?
float: left is not an option
HTML:
<div id='main'>
<div id='first'>
<img src='https://www.google.ru/images/icons/product/chrome-48.png' height='30'>
</div>
<div id='second'>Text</div>
</div>
CSS:
div {
border: 1px solid gray;
height: 30px;
}
#first {
display: inline-block;
height: 30px;
}
#second {
display: inline-block;
height: 30px;
}
Add vertical-align: top to do it without float.
jsFiddle
#first {
display: inline-block;
height: 30px;
vertical-align: top;
}
#second {
display: inline-block;
height: 30px;
vertical-align: top;
}
Make the container with relative position and the div you want to position with absolute position with top:0;
http://jsfiddle.net/uqAGt/
Just add float: left or vertical-align: top to your child divs:
Demo: http://jsfiddle.net/dsUnc/2/
Demo: http://jsfiddle.net/dsUnc/5/
How can I use the vertical-align as well as float in the div properties? The vertical-align works fine if I do not use the float. But if I use the float, then it does not work. It is important for me to use the float:right for the last div.
I am trying following, if you remove the float from all div's then it would work fine:
<div class="wrap">
<div class="left">First div, float left, has more text.</div>
<div class="left2">Second div, float left </div>
<div class="right">Third div, float right</div>
</div>
CSS:
.wrap{
width: 500px;
overflow:hidden;
background: pink;
}
.left {
width: 150px;
margin-right: 10px;
background: yellow;
float:left;
vertical-align: middle;
display:inline-block
}
.left2 {
width: 150px;
margin-right: 10px;
background: aqua;
float:left;
vertical-align: middle;
display:inline-block
}
.right{
width: 150px;
background: orange;
float:right;
vertical-align: middle;
display:inline-block
}
JSFiddle
You need to set line-height.
<div style="border: 1px solid red;">
<span style="font-size: 38px; vertical-align:middle; float:left; line-height: 38px">Hejsan</span>
<span style="font-size: 13px; vertical-align:middle; float:right; line-height: 38px">svejsan</span>
<div style="clear: both;"></div>
http://jsfiddle.net/VBR5J/
Edited:
The vertical-align CSS property specifies the vertical alignment of an inline, inline-block or table-cell element.
Read this article for Understanding vertical-align
Vertical alignment doesn't work with floated elements, indeed. That's because float lifts the element from the normal flow of the document.
You might want to use other vertical aligning techniques, like the ones based on transform, display: table, absolute positioning, line-height, js (last resort maybe) or even the plain old html table (maybe the first choice if the content is actually tabular). You'll find that there's a heated debate on this issue.
However, this is how you can vertically align YOUR 3 divs:
.wrap{
width: 500px;
overflow:hidden;
background: pink;
}
.left {
width: 150px;
margin-right: 10px;
background: yellow;
display:inline-block;
vertical-align: middle;
}
.left2 {
width: 150px;
margin-right: 10px;
background: aqua;
display:inline-block;
vertical-align: middle;
}
.right{
width: 150px;
background: orange;
display:inline-block;
vertical-align: middle;
}
Not sure why you needed both fixed width, display: inline-block and floating.