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/
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'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 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
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 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/