Please can some one help me with ALIGNING one image on the BOTTOM LEFT and the other image on the TOP RIGHT. So i have one basic page... two images and i want them diagonally opposite from each other. Very simple but every thing i have tried just makes both images align on the right....
Here's one solution that involves absolute positioning. It can get tricky to coordinate multiple entities, but it's pretty flexible if you want an exact layout.
<div style="position: relative; width: 300px; height: 300px;">
<div style="position: absolute; background-color: red; width: 100px; height: 100px; left: 0px; top: 0px;">Top Left</div>
<div style="position: absolute; background-color: blue; width: 100px; height: 100px; right: 0px; bottom: 0px;">Bottom Right</div>
</div>
http://jsfiddle.net/UedkS/
Related
I want to arrange the two pictures in a way that will always compose the word "Charleston" in the middle of the screen. I want this to be responsive to different screen resolutions. Can you help me with that?
<div id="leftHalf"></div>
<div id="rightHalf"></div>
#leftHalf {
background: url(/charback3.jpg);
width: 50%;
position: absolute;
top: 0px;
left: 400px;
bottom: 0px;
height: 100%;
background-repeat: no-repeat !important;
}
#rightHalf {
background: url(/charback4.jpg);
width: 50%;
position: absolute;
right: 0px;
top: 0px;
height: 100%;
background-repeat: no-repeat !important;
}
View My Page
Here is one method, using display:inline to keep the two images on the same horizontal line. max-width:50% keeps the images at a maximum of 50% of their container's width without expanding beyond their native widths.
Note that using display:inline will preserve whitespace. So, remove the whitespace between your two <img> tags.
<div id="container">
<img src="/charback3.jpg" alt="" /><img src="/charback4.jpg" alt="" />
</div>
html, body {
margin:0;
}
div#container {
text-align:center;
}
div img {
display:inline;
max-width:50%;
}
WORKING EXAMPLE (jsfiddle)
I have a loop to loaded logo image in floated div block, I been tried few tips from stackoverflow but have no luck to make the logo align center and middle within the div, all logo height are not fixed and might have different height for each:
<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="left" src="images/logo/logo1.jpg">
</div>
Please help, thanks.
Use positioning. The following worked for me...
With zoom to the center of the image (image fills the div):
div{
float:left;
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
Without zoom to the center of the image (image does not fill the div):
div{
float:left;
display:block;
overflow:hidden;
width: 100px;
height: 100px;
position: relative;
}
div img{
width: 70px;
height: 70px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
You really should move your CSS out of the style attribute and into a file like style.css if you have not done so. But if you really have to you can place the code below into inline styles like you have now.
Remove the align="left" attribute from your image tag and set the image's display to block. This will allow margin: 0 auto; to center your image for you inside the containing DIV.
Looks like you'll have to replicate a <table> with CSS to get the vertical centering you desire. Table cells allow vertical centering. To do this I've added and additional DIV with a class of .container. The .container DIV has it's display set to table and the .image-container DIV, which is acting like a table cell, has it's display set to table-cell.
CSS
.container {
float: left;
width: 80px;
height: 80px;
padding: 8px;
border: 1px solid #ccc;
display: table;
}
.image-container {
display: table-cell;
vertical-align: middle;
}
.image-container img {
display: block;
margin: 0 auto;
}
HTML
<div class="container">
<div class="image-container">
<img src="images/logo/logo1.jpg">
</div>
</div>
JSFiddle: http://jsfiddle.net/MJ5j4/
just create a class "centerImgWrapper", and wrap all your "center" Images anywhere in the Code with divs.
Thats pure CSS
.centerImgWrapper {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;}
.centerImgWrapper img {
left: 0;
right:0;
top: 0;
bottom:0;
max-height: 100%;
max-width: 100%;
margin:auto;
position:absolute;
}
Just Check out the Fiddle.
MyFiddle
Dave
If you are trying to get it in the middle inside the div, have you tried:
<div style="width:800px; height:800px; padding:8px; border:1px solid #ccc;">
<img width="78px" src="mobiIconGreenGray.gif" style="margin-left:50%; margin-top:50%;">
</div>
I used "margin-left:50%; margin-top:50%;" INSIDE the IMG tag and got rid of the "align" and "float" attribute. I probably wouldn't want to use "align" in this case.
Either way, I hope it helps.
Images are more or less displayed as inline-blocks. So you can just set text-align: center; on the styles of the container div.
Getting something to be vertically aligned in the middle is complicated with css. If you're going to be dynamically placing the logo with JavaScript anyway, you can save yourself trouble and just center it vertically by specifying the margins with JavaScript.
Check out this demo: http://jsfiddle.net/jyvFN/1/
HTML
<div id="container">
<img id="logo" src="http://placekitten.com/100/100" />
</div>
CSS:
#container {
float: left;
background-color: blue;
width: 200px;
height: 150px;
text-align: center;
border: 1px solid red;
}
JavaScript
var logo = document.getElementById('logo');
var container = document.getElementById('container');
var margin = (container.clientHeight - logo.clientHeight) / 2;
logo.style.marginTop = margin + "px";
logo.style.marginBottom = margin + "px";
Why didn't you set align of the image center?
Then your code should be:
<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="center" src="images/logo/logo1.jpg">
And I think it's also problem of the ratio of the image width vs the div block + it's padding and border.
Try to set it balance.
So I have a space for images of 120x120, it's for thumbnails, based specially in width.
It's a div that contains the image, that links to an article
I have an image of 120x57 but it stays at the top of the div, letting quite too much space from the text on the next div
<div class="thumb">
<img src="http://link.com/media/thumb.png" border="0" alt="thumb" title="thumb" class="thumblist">
</div>
The css for it:
margin: 8px 0;
width: auto;
height: 120px;
overflow: hidden;
I've tried with vertical-align:bottom, but no success, there is no other clean way to align it to the middle (or to the bottom at least of the ?
Regards
You can try this:
.thumb {
margin: 8px 0;
width: auto;
height: 120px;
overflow: hidden;
display:table-cell;
vertical-align:bottom;
}
I can think of a couple of ways, but none particularly elegant.
Setting the image in the background is the fastest, but the image can't be selected or printed (with default print settings). (Styles are inline for clarity.)
<a href="#" style="display: block; width: 120px; height: 120px;
background: url(thumb.jpg) bottom no-repeat;"></a>
Absolute positioning is a potent option, but it can have its issues.
<a href="#" style="display: block; width: 120px; height: 120px; position: relative;">
<img src="thumb.jpg" style="display: block; position: absolute; bottom: 0px; left: 0px; width: 120px;" /></a>
One of the simplest and surest ways is to just make a square image, padded as needed. It involves either manual work or additional script to prepare the images though.
Then there's table, but, well, it's table...
I'd go for the square image, if there's an image generator handy or there aren't too many thumbnails to adapt them in Photoshop myself. Failing that, background works just fine in most situations.
I am using Google Maps API v3.
In Chrome, the map fits fine into the div element I set with width 200px and height 200px.
In Firefox, it tries to take up the whole screen. I noticed the styling code that google maps uses there is this line:
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
I've been trying to modify this via the API to set the width to 190 and hieght to 190.
Does anyone know how to do this?
The CSS styling I used for the div was:
div.map {
height: 190px;
width: 190px;
}
I added this into my API call already thinking it would resize based on the div styling:
google.maps.event.trigger(map, 'resize')
Happy Holidays!!
you have to hard code your width/height in an inline style. I ran into the same problem. The reason is it uses the width/height to create the other elements within the map.. try setting your code as follows:
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 190px; height: 190px; z-index: 0;">
How to make a bookmarklet where there's a div that pops up in the middle of the screen?
Seems very simple, i just can't get it down.
To make a div appear in the middle of the screen, you need two divs, one inside the other:
The outer div is has fixed position at top 50%; left: 0px; right 0px; height: 1px and overflow: visible
The innder div is absolutely positioned to left: 50%, top: minus the height of the div and has a margin-left of minus the width of the div. That is:
#
<div id="outerDiv">
<div id="innerDiv">
Your content
</div>
</div>
#outerDiv
{
position: fixed;
top: 50%;
height: 1px;
left: 0px;
right: 0px;
overflow: visible;
}
#innerDiv
{
position: absolute;
width: 200px;
height: 100px;
left: 50%;
margin-left: -100px;
top: -50px;
}
Don't forget that IE6 doesn't support position: fixed so you might want to fall back to position: absolute and scroll to the top of the page if you detect IE6.
As for the bookmarklet: you need to write javascript that constructs these elements and append it to the bottom of the page. Here's a detailed tutorial on adding elements to a page with javascript.
javascript:var theDiv = document.createElement( 'div' ) ; theDiv.appendChild( document.createTextNode('hello') ) ; theDiv.style.position="absolute";theDiv.style.left='50%';theDiv.style.top='50%';theDiv.style.border='solid 2px black'; document.body.appendChild( theDiv ) ; void(0);