How can i make an image to appear in the center of a webpage the image should be floating so that it will be in ther center vertically as well as horizontally .. there a re lot of snippets but none of them is complete so its not f any use to me :( I have only one jpg in the webpage nothing else
this is what i tried, this aligns it center horizontally but not centering it vertically
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title> Welcome </title>
<style type="text/css">
.centeredImage
{
vertical-align: middle;
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
</style>
</head>
<body>
<p class="centeredImage">
<img src="mypic.jpg" alt="welcome " width ="1024" height = " 565" >
</p>
-T
This is a very tricky situation that's been discussed here more times than I can imagine.
Some would say use javascript to measure the window and move the image manually.
But if you don't know JS and really want to use vertical-align, try this: http://www.vanseodesign.com/css/vertical-centering/
HTML:
<img src="mypic.jpg" alt="Welcome" class="centered" />
CSS:
.centered {
width: 1024px; height: 565px;
position: absolute;
left: 50%; top: 50%;
margin-left: -512px; /* 1024 / 2 */
margin-top: -283px; /* 565 / 2 */
}
Example: http://jsfiddle.net/mtvyp/
Just for clarity's sake: I removed the <p> tags for centering, as they have no semantic value (i.e., they are not describing a paragraph).
Instead, we're using absolute positioning to put the picture at the halfway point of the window (its container). That, however, puts the top-left corner at that position. To actually center it, we use the defined dimensions of the picture and re-position it using negative margins of half the original size.
Hope that helps.
Related
I have a div element, which has a background image that is centred on it. I want an h2 or p element to be positioned, (fixed or absolutely, am not sure which one is correct) on top of that div element, but not overlapping it. It should have the same bottom margin even when the window is resized. I have already tried putting an innerText inside of the div with the background image. I added the image like this:
<div>
<!-- other elements -->
<div class="v-container visible default background-image">
</div>
and in css:
.v-container {
background-color: #e9e9e9;
text-align: center;
font-family: cursive;
}
.default {
background-color: rgba(0, 0, 0, 0.103);
width: 100%;
height: 100%;
pointer-events: none;
}
.background-image {
background-image: url('../graphics/Note.png');
background-position: center;
background-repeat: no-repeat;
}
I tried for some time to solve my problem and I think I have gotten an answer to my question. Well, it is not exactly the answer I need but it gave the element above the image a constant spacing between the image and the top of its parent container. I achieved this using the top: x% and bottom: -x% CSS attribute. Where x represents the desired percentage. For example, top: 15% and bottom: -15% achieved the same thing. Am not sure why I had to use the '-' sign while using the bottom attribute, but it works. Sample code below of how I achieved this:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NoteBook 2.0</title>
<link rel="stylesheet" href="../styles/photon.css">
<link rel="stylesheet" href="../styles/main.css">
<script src="../UI/renderer.js" async defer></script>
</head>
<body>
<div class="invisible default v-container">
<h4>Tap a note on the left to view here</h4>
<h5>Or Tap the
<span class="icon icon-book"></span> icon at the left to add new note
</h5>
<img src="../graphics/Hand_note.png" alt="Note icon">
</div>
</body>
</html>
The stylesheet (CSS)
html, body {
width: 100%;
height: 100%;
}
.v-container {
background-color: #e9e9e9;
text-align: center;
}
.v-container :first-child {
position: relative;
top: 15%;
}
.v-container :nth-child(2) {
position: relative;
top: 15%;
}
.v-container :last-child {
position: relative;
top: 20%;
}
And the result:
From the image, it appears normal, but when you resize the window, the image still maintains a constant spacing with other elements. The text on top always stays 15% on its parent element because its position was set to relative. The text element below the first element child also has 15% set ( I guess, what it means is that, because the position was set to relative also, it still follows the order in which child elements appear in the parent container.
Can you post your code?
If you explicitly used an image as the background of a div then centering the element will be relative to the div itself and likely never really line up with the background image unless the aspect ratio is perfect.
A solution might be to create a nested child div and setup your margins relative to the parent.
Or you could set the image as an element instead of the background, this would make it much easier to reference.
It would be easier to help if I could see your code.
I want to have a <div> in my <body> that is 95% of the page's width and height. I want this <div> to be centered on all sides, such that a 2.5% margin exists on all sides of the <div>. The attached code almost works, but the top has no margin, such that the <div> extends all the way to the top of the page. I am using a reset. Can anyone offer some insight as to why this isn't working as intended?
The most important thing for me here is that I have no interest in working with non-relative measurements. I am coming from a background in Android development and believe that anything I make should scale to (almost) any screen size.
I would also like to say that I am just starting with HTML/CSS/JS and at this moment have no intention of supporting browsers that do not comply with the W3C standard (IE). Furthermore i would like to avoid anything that seems like a hack or a workaround.
The CSS Reset in case your interested: http://79.170.44.85/rasmussenprojects.com/reset.css
A hard copy since I can only post 1 link and it seems best to link to the reset:
<!doctype html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
html, body{
background-color:rgb(25,25,25);
height:100%;
width:100%;
}
.content-panel{
background-color:rgb(50,50,50);
width:95%;
height:95%;
margin:auto;
}
</style>
</head>
<body>
<div class="content-panel">
</div>
</body>
</html>
div{
background: lightgray;
bottom: 0;
height: 95%;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 95%;
}
<div>
content
</div>
My take would be that you just give the body a padding: 2.5% (and don't forget position:relative).
The div then should just fill up all available space with position:absolute;top:0;right:0;bottom:0;left:0;
In general I also would work with box-sizing:border-box
I have a webpage, where I am wanting to layer 3 images accordingly to act as a backgound so content can be placed on top. The images shouldn't move when scrolling, so fixed position wouldn't work.
Below is the sequential order they should appear from back to front (1-3)
img - sky.jpg which I set as the background image in the html.
img - backDrop.png which is set above the sky.jpg.
img - BtmRight.png which I want to position above all images and bottom right.
Both images (backDrop.png, BtmRight.png)are set with absolute positioning and z-index to determine order.
I cant get BtmRight.png image to appear bottom right above other images. I want the bottom right image to stay in place when you scroll the page. I would also like the content to appear over all the images.
Below is my HTML/CSS, Is there something I'm missing?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
html {
height: 100%;
margin: 0;
padding: 0;
margin-top:100px;
background: url(sky.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#imgBack {
width: 100%;
margin-top:100px;
position:absolute;
z-index:20;
border:#0FF thin solid;
}
#imgBtmRight {
position:absolute;
z-index:50;
bottom:0;
right:0;
}
</style>
<body>
<img id="imgBtmRight" src="BtmRight.png" width="413" height="283" />
<img id="imgBack" src="backDrop.png" />
</body>
</html>
Any light on the subject, or assistance would be greatly appreciated. Thanks
It's probably a good idea to stack your DOM elements in the right order (as well as closing that div):
body
Backdrop
BtmRight
Content
The natural 'stacking' is bottom to top - think of each element (image, div, etc.) as a piece of paper. As you move down the HTML document, you add pieces of paper to the stack. The papers sit on top of each other, unless you change the z-indexing explicitly - but it's best to get them in the right order to begin with, if you can.
Edit:
Seems to be working:
Example using linked images
The only things I changed were the image sources and positioning on the body tag. Unless there's something else you've missed out of the code you should have no problem.
ANOTHER Edit:
If you want the bottom-right image to stay in place, use position: fixed on that image rather than position: absolute.
YET ANOTHER Edit:
If you want the content to go over the top of the bottom-right image, you just need to add a wrapper for your content and use z-indexing:
Example
I'm trying to establish a layout with in the base three rows: A header, content and footer div.
The two outer most div's are of a fixed height; The center div has to be fluid and adapt itself to the height of the browser screen.
Could someone point me in the right direction how to tackle this with proper CSS? For now I'm not yet interested in a javascript solution. As CSS doesn't provide a clean answer, a javascript solution comes eminent!
This is how far I came:
<div id='header'>Header</div>
<div id='content'>
<div id='innerContent'>
This is the fluid part
</div>
</div>
<div id='footer'>footer</div>
css:
#header {
position:absolute;
top:0px;
left:0px;
height:100px;
z-index:5;
}
#content {
position:absolute;
top:0px;
left:0px;
height:100%;
z-index:2;
}
#innerContent {
margin-top:100px;
height:100%;
}
#footer {
height:400px;
}
EDIT:
I'm sorry, I feel embarassed. I made something similar about a year ago, but at first I didn't think it was possible to adjust it to this situation. Apparently it was.
As I think other's have already said, it is possible to put the footer div at the bottom by positioning it absolutely. The problem is to adjust it's position when the content div gets larger. Since the footer is absolutely positioned it won't follow the content div's flow, which makes it stay at the same place even though the content expands.
The trick is to wrap everything in an absolutely positioned div. It will expand if it's content gets larger, and the footer div will be positioned according to the wrapper's borders instead of the document's borders.
Here's the code. Try to put a bunch of <br /> tags within the content div and you'll see that everything adjusts.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
min-width: 100%;
position: absolute;
}
#header {
height: 100px;
background-color: red;
}
#content {
background-color: gray;
margin-bottom: 50px;
}
#footer {
height: 400px;
min-width: 100%;
position: absolute;
bottom: 0px;
margin-bottom: -350px;
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</div>
</body>
</html>
ORIGINAL:
Sadly, css lacks a clean way to do this. You don't know the viewport height (which you called h) and therefore can't calculate h-100-50 You have to build your website so that most people will see 50px of the footer div. The way to do that is to set a min-height for the content div.
The min-height value must be derived from some standard viewport height. Google Labs have published their data on viewport sizes for their visitors and made a great visualization of it here:
http://browsersize.googlelabs.com/
I design for my own viewport, which is 620px high (according to google ~80% have this viewport height). Therefore the min-height for the content div should be 620-100-50 = 470 px.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: red;
}
#content {
min-height: 470px;
background-color: gray;
}
#footer {
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</body>
</html>
If I understand your problem correctly I think this might lead you into the right direction.
http://jsfiddle.net/mikevoermans/r6Saq/1/
I'll take a poke at it. Not sure if I read your screenshot correctly but I set the content div to be 50-100px in height.
Here is my jsfiddle: http://jsfiddle.net/AX5Bh/
I am using the min-height and max-height CSS attributes to control the #innerContent div.
If you horizontally expand the result window you will see that some of the text is highlighted . I have set the content to be hidden if it is larger than the #innerContent div. You might want something different. I only highlighted the text with an <em> tag to demonstrate that max-height was working.
If you remove all the text but the first sentence you will see it is 50px in height.
Here is a link to browser support of min-height and max-height: http://caniuse.com/#search=max-height
i have a div who have some image inside them. i need to show them in center align means if i normally put that they align left.
the image is dynamic maybe it's small or big. i need to show them in middle in every condition.
how i can do this using css. any trick to do this
Use this:
img {
margin-left:auto;
margin-right:auto;
display: block;
}
Here is a sample page:
<!DOCTYPE HTML>
<html lang="en-EN">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
#container {
background-color: yellow;
width: 500px;
height: 300px;
}
img {
margin-left:auto;
margin-right:auto;
display: block;
}
</style>
</head>
<body>
<div id="container">
<img src="http://www.google.com/images/logos/ps_logo2.png" alt=" " />
</div>
</body>
</html>
Anyway, you have to try it in all the browsers, I'm not sure if it works in all of them.
Centering stuff in HTML with CSS is one of the most painful things.
You could try applying the style text-align: center to the div.
I you need the image to be at the horizontal center you can use the text-align: center on the div container as shown here
But if you need the image to be horizontal and vertical center then it will be easy to do as given here using the background style property