I attached a drawing of what my page looks like. The page has a width of 980px and the image has a width of almost 1200px. What I want to achieve is to have the page centered and to show as much of the image as possible while also keeping the image centered. I tried to absolutely position the image but then on mobile devices the browser page is set to the width of the image and the content does not stay centered.
Basically, there could be screens where not the entire image is shown to the user but only as much as fits the screen.
CSS:
.page_container {
width: 980px;
margin: 0 auto;
}
.image {
position: absolute;
left: 0;
right: 0;
}
HTML:
<body>
<div class="page_container">...</div>
<div class="image"><img .../></div>
<div class="page_container">...</div>
</body>
pls use the position: relative for the image.like this:
<div class="page_container">...</div>
<div class="image"><img src="http://g.hiphotos.baidu.com/album/w%3D210%3Bq%3D75/sign=3584477cf636afc30e0c386483229af9/caef76094b36acaf18169c407dd98d1000e99c93.jpg" width=1200 height=200 /></div>
<div class="page_container">...</div>
css code:
.page_container {
width: 980px;
margin: 0 auto;
background: orange;
}
.image {
position: relative;
left: 50%;
margin-left: -600px;
}
the margin-left is equal to the img's width/2. pls view the demo.
You Can Try This
<div class="popup">
<div class="wrapper">
<img src="http://farm4.staticflickr.com/3721/8826906676_501192b1c4.jpg">
</div>
</div>
CSS:
.popup{
position:fixed;
left:50%;
}
.popup .wrapper{
position:relative;
left:-50%;
/*popup-styles*/
background-color:#fff;
padding:10px;
border:solid 2px #444;
border-radius:10px;
}
html{background-color:#aaa;}
Example : jsfiddle
by Elad Shechter
.image {
position:absolute;
left:50%;
margin-left:-600px; // half of image width
}
You can try this way:
HTML:
<div class="wrapper">
<div class="image">
<img src="img/img.jpg">
</div>
</div>
JS:
<script>
$(document).ready(function() {
$('div.image').each(function() {
var imageSrc = $(this).find('img').attr('src');
$(this).css('background', 'url(' + imageSrc + ') center top no-repeat');
});
});
</script>
CSS:
.wrapper {
float: left;
width: 100%;
overflow: hidden;
}
.wrapper .image img {
visibility: hidden;
}
Easy way to center <img /> tag.
body {
margin: 0;
}
.warpper img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover
}
<div class="warpper">
<img src="https://i.stack.imgur.com/gkOwi.jpg" />
</div>
How about this: https://jsfiddle.net/squadjot/hva34oju/
HTML:
<div id="imgwrap">
<img src="https://i.stack.imgur.com/gkOwi.jpg">
</div>
CSS:
#imgwrap {
text-align:center;
}
#imgwrap img {
margin:0 -1000%; /* don't ask :P */
}
Works in every browser i've tried. IE, Chrome, Opera, FF
background-size:auto;
set this property for your image
Try this:-
.image {
position: absolute;
left: -50%;
}
I think it will work for bigger images...
.image {
position: absolute;
left: -50%; }
Related
I am trying to horizontally center images of any width. (In other words, each image has a width that falls in a range between 100px and 1000px). The parent area is 712px wide.
Most solutions I've tried center the images left side at the 50% mark.
This margin-left:50%; transform:translate(-50%,0); will position the element in the middle of its container. Even container is smaller than image:
div { width:100%; overflow-x:hidden; border:1px solid }
div > img { margin-left:50%; transform:translate(-50%,0); vertical-align:middle; }
<div>
<img src="http://lorempixel.com/400/200/">
</div>
<div>
<img src="http://lorempixel.com/1000/600/sports/3/">
</div>
img {
display: block;
margin: 0 auto;
}
or:
div.your-block-wrapper {
text-align: center;
}
div.your-block-wrapper img {
display: block;
}
.ct {
position: relative;
width: 700px;
height: 700px;
margin: 0 auto;
overflow: hidden;
}
.ct img {
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
z-index: 22;
}
<div class="ct">
<img src="http://images.entertainment.ie/images_content/rectangle/620x372/success-kid.jpg" alt="" />
</div>
Check this out:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This apparently is something that's been floating around some of my dev friends that they've been adopting. I will likely start giving this a shot. It's still CSS, it's clean and no script required. You can also vertically center (and other stuff, as well).
You could do it like this:
https://jsfiddle.net/46mdr2z6/1/
<div class="wrapper">
<div>
<img src="http://placehold.it/250x110">
</div>
<div>
<img src="http://placehold.it/150x150">
</div>
<div>
<img src="http://placehold.it/650x250">
</div>
<div>
<img src="http://placehold.it/850x350">
</div>
<div>
<img src="http://placehold.it/120x750">
</div>
<div>
<img src="http://placehold.it/520x270">
</div>
</div>
css:
.wrapper {
width: 712px
}
.wrapper > div{
text-align: center;
}
img {
max-width: 100%;
}
How can I have my image centered horizontally (and if possible vertically also) ?
HTML
<div class="wholeHeight">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="ajustImageToScreenResolution">
</div>
CSS
.wholeHeight
{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.ajustImageToScreenResolution
{
max-width: 100%;
max-height: 100%;
}
jsFiddle: http://jsfiddle.net/0exjyfz5/
The best way out would be:
<div class="wholeHeight">
<div class ="myImage">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="ajustImageToScreenResolution">
</div>
</div>
.wholeHeight {
position: relative;
}
.myImage{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, +50%);
}
.ajustImageToScreenResolution
{
max-width: 100%;
max-height: 100%;
}
Fiddle:http://jsfiddle.net/0exjyfz5/8/
Please check with this I made some changes in the css will help you
<div class="wholeHeight">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="ajustImageToScreenResolution">
</div>
wholeHeight
{
text-align:center;
}
.ajustImageToScreenResolution
{
max-width: 100%;
max-height: 100%;
display:inline-block;
}
To center it vertically put the image in a div, make the div the same height and width as the image, and set both "margin-left" and "margin-right" to auto for the div. This will center it vertically.
Please add the following code.
<center><div class="wholeHeight">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="ajustImageToScreenResolution">
</div></center>
Thanks is always appreciated.
From my understanding you can use absolute positioning inside of it's parent to place it exactly where ever you want. Like explained here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I'm trying to get my img elements to sit on the bottom of their parent divs but when I give the img's an absolute position the layout breaks. It seems like I need to assign a height to the section or the divs but nothing seems to work.
Please note that I commented out the absolute positioning on the images in the css so the layout is more presentable
<head>
</head>
<body>
<section id="artImages">
<div id="artImage1">
<img src="http://placekitten.com/288/200" alt="" />
</div>
<div id="artImage2">
<img src="http://placekitten.com/144/160" alt="" />
</div>
<div id="artImage3">
<img src="http://placekitten.com/673/300" alt="" />
</div>
</section>
</body>
CSS:
section {
margin: 100 auto;
}
section#artImages {
width: 673px;
height: auto;
position: relative;
display: block;
}
section#artImages div {
float: right;
height: auto;
position: relative;
}
div#artImage1 {
width: 288px;
}
div#artImage2 {
width: 144px;
}
section#artImages div img {
width: 100%;
/* position: absolute; */
bottom: 0;
}
Here is my jsfiddle http://jsfiddle.net/PsMff/ Below is an illustration of what I'm looking for.
You are correct ... the divs need to have some hight assigned, if you want to keep the current html markup.
Note: you also don't need to use the html elements' tag-names in combination with ids (e.g. div#artImage1), as one id can only refer to one specific element in the markup.
You could try something like this (jsfiddle), I gave the divs hight: 300px:
section {display: block}
#artImages {
margin: 0 auto;
width: 673px;
}
#artImages div {
position:relative;
float:right;
height:300px;
}
#artImage1 {
width: 288px;
}
#artImage2 {
width: 144px;
}
#artImage3 {
position:relative;
width:100%;
background-color:blue;
}
#artImages div img {
position:absolute;
width: 100%;
bottom: 0;
}
Another option:
If you don't want to assign a height to the divs, but rather have it adjust to the higher one of them,
wrap another container around the upper two divs. Here I added the #floater div to your markup:
<section id="artImages">
<div id="floater">
<div id="artImage2">
<img src="http://placekitten.com/144/160" alt="" />
</div>
<div id="artImage1">
<img src="http://placekitten.com/288/200" alt="" />
</div>
</div>
<div id="artImage3">
<img src="http://placekitten.com/673/300" alt="" />
</div>
</section>
and now float right the #floater and use display:inline-block; on #artImage1 and #artImage2 and bottom:0; on images. Something like this:
section {display: block}
#artImages {
margin: 0 auto;
width: 673px;
}
#floater, #artImage3 {
float:right;
}
#artImage1, #artImage2 {
display:inline-block;
width: 288px;
}
#artImage2 { width: 144px }
#artImage3 { width: 100% }
#artImages img {
width: 100%;
bottom: 0;
}
jsfiddle example
Use class attribute in place of id, then add the following code
position : relative;
bottom : 0px;
clear : both;
I am trying to make 3 div's in row design. Where the header and footer have fixed height.
The center div expands to fill the empty space. I have tried but the closest I got is the code below. Still having problems with the center div which expands over the footer div.
html:
<div id='container'>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
</div>
css:
#rowOne {
width: 100%;
height: 50px;
background: green;
}
#rowTwo {
width: 100%;
background: limegreen;
height:100%;
overflow:hidden;
}
#rowThree {
width: 100%;
position: fixed;
clear: both;
background: green;
position:absolute;
bottom:0;
left:0;
height:50px;
}
#container {
height: 100%;
}
Three Row pure CSS
I know this post is getting on a bit, but despite claims to the contrary, you can do this very simply with CSS. No need for JavaScript, jQuery, CSS 3 hacks etc.
Here's a couple of jsf's that show fixed header and footer and dynamic body div.
This first one shows fixed pixel height header and footer and dynamic body EXACTLY as you wanted in your image
http://jsfiddle.net/LBQ7K/
<body>
<div class="header"><p>Header</p></div>
<div class="cssBody"><p>Hello World</p></div>
<div class="footer"><p>Footer</p></div>
</body>
html, body, {
height: 100%;
}
.header {
position: absolute;
top: 0px;
height: 50px;
width: 100%;
background: #f00;
}
.footer {
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
background: #00f;
}
.cssBody {
position: absolute;
top: 50px;
bottom: 50px;
width: 100%;
background: #0f0;
}
The second shows you can use the same technique to have dynamic headers & footers.
http://jsfiddle.net/reqXJ/
<body>
<div class="header"><p>Header</p></div>
<div class="cssBody"><p>Hello World</p></div>
<div class="footer"><p>Footer</p></div>
</body>
html, body, {
height: 100%;
}
.header {
position: absolute;
top: 0px;
height: 15%;
width: 100%;
background: #f00;
}
.footer {
position: absolute;
bottom: 0;
height: 15%;
width: 100%;
background: #00f;
}
.cssBody {
position: absolute;
top: 15%;
bottom: 15%;
width: 100%;
background: #0f0;
}
This is a very common problem, one of the solutions that worked for me is from the following website:
http://ryanfait.com/sticky-footer/
with the code:
http://ryanfait.com/sticky-footer/layout.css
and another popular choice:
http://www.cssstickyfooter.com/
If this does not meet your needs, let us know, we can help more.
Seems like you are try to do a sticky footer, well... you will need a few hacks:
HTML:
<div id='container'>
<div class="header">
<h1>Sticky Footer!</h1>
</div>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
<div class="push"></div>
</div>
<div id='footer'></div>
CSS
.container {
min-height: 100%;
height: auto !important;height: 100%;
/* the bottom margin is the negative value of the footer's height */
margin: 0 auto -142px;
}
.footer, .push{
height: 142px; /* .push must be the same height as .footer */
}
Note: Replace the footer and push height for your fixed height and don't forget to insert the push div after the rows in the container.
You can fake this by absolutely positioning the rows, and adding padding to top and bottom for the middle row. You cannot do this like you were doing with tables
#container { position:relative; height:800px } // needs height
#rowOne, #rowTwo, #rowThree { position:absolute }
#rowOne { top:0; left:0 }
#rowThree { bottom:0; left:0 }
#rowTwo { left:0; top:0; padding:50px 0; } // top and bottom padding 50px
could this line of code help?
DEMO
Try this:
#container{
...
position:relative;
}
#content{
min-height: xxx;
}
This should exactly do what you want:
html code:
<div id="header">
header
</div>
<div id='container'>
<div id='rowOne'>one</div>
<div id='rowTwo'>two</div>
<div id='rowThree'>three</div>
</div>
<div class="clearfix"></div>
<div id="footer">
footer
</div>
CSS code:
.clearfix {
clear: both;
}
#header, #footer {
background-color: red;
}
#container {
width: 100%;
}
#rowOne {
width: 25%;
background: green;
float: left;
}
#rowTwo {
width: 55%;
height: 100px;
background: limegreen;
float: left;
}
#rowThree {
width: 20%;
background: green;
float: left;
}
You can also test it on jsFiddle
Have you tried looking at a CSS framework? They come with default classes you can use to set up something like that within a few short minutes. They also help producing cleaner html and interfaces that you can easily redesign at a later time.
http://twitter.github.com/bootstrap/index.html
I hope you are looking like this :- DEMO
CSS
#container {
height: 100%;
}
#rowOne {
height: 50px;
background: green;
position:fixed;
left:0;
right:0;
}
#rowTwo {
background: limegreen;
min-height:500px;
position:absolute;
left:0;
right:0;
top:50px;
}
#rowThree {
position: fixed;
background: green;
bottom:0;
left:0;
right:0;
height:50px;
}
HTML
<div id='container'>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
</div>
In response to your comment on jedrus07's answer:
all this sollutions expand the center div behind the footer div. I want a solution with each div having only his own space.
The only way to do that is with CSS 3 calc(). If you don't need to support very many browsers, that's an option, and here's a demo of it in action:
http://jsfiddle.net/5QGgZ/3/
(Use Chrome or Safari.)
HTML:
<html>
<body>
<div id='container'>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
</div>
</body>
</html>
CSS:
html, body, #container {
height: 100%;
}
#rowOne {
height: 50px;
background: #f00;
}
#rowTwo {
height: -webkit-calc(100% - 100px);
background: #0f0;
}
#rowThree {
height: 50px;
background: #00f;
}
If you want wider browser support, you're going to have to go with a sticky footer solution like the ones jedrus07 mentioned, or Tom Sarduy's answer.
One way would be using Jquery to set the minimum height of the middle div to be the height of the screen, minus the height of the other two divs (100px)
something like this should work:
$(document).ready(function() {
var screenHeight = $(document).height() - 100px;
$('#rowTwo').css('min-height' , screenHeight);
});
I have a div and an image inside it as a background:
<div id="background">
<img src="background.png" class="stretch" alt="" />
<div class="header">
<span>header</span>
</div>
<div class="picture">
<img src="pic" alt="" />
</div>
</div>
And the following css:
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
.header {
position: absolute;
left: 12px;
top: 18px;
font-family: Arial;
font-size: 14pt;
color: #3A4549;
margin-bottom:
}
here's a fiddle: http://jsfiddle.net/3j7vk/
How can I add the image right under the header without specifying an absolute position?
Right now it goes under the background image. Thanks!
Is this what you're after?
http://jsfiddle.net/3j7vk/1/
Is there any reason you're not just adding the image as a background to the div?
#background {
background: url(background.png) no-repeat;
background-size: cover;
/*other rules*/
}
If the image is just a background, it shouldn't appear in the markup at all.
See this page on the background-size property.
It's odd that you're not using CSS's background-image property, but to answer your question, you can give elements z-index to specify their order and make them appear on top of each other. It only works when the position property is specified, but rather than making it absolute, make it relative:
.stretch {
width:100%;
height:100%;
position: relative;
z-index: 1;
}
Then give your .header a z-index of it's own:
z-index: 2;
But to be honest, using CSS's background properties would be the better option in my opinion.
Ok, if you want to use an img as your background you can do it like so:
<div id="background">
<img src="http://placekitten.com/g/600/600/" class="stretch" alt="" />
<div id="container">
<div class="header">
<span>header</span>
</div>
<div class="pic">
<img src="http://lorempixel.com/200/200/" alt="" />
</div>
</div>
</div>
css:
#container {
position:absolute;
top:0;
left:0;
}
#background, .stretch, #container {
width: 100%;
height: 100%;
}
.header {
font-family: Arial;
font-size: 14pt;
color: #3A4549;
margin-bottom:
}
.pic
{
height: 114px;
}
fiddle: http://jsfiddle.net/JKirchartz/SrvyD/
That way everything in your container flows like a plain html document and you don't have to position everything.