I tend to do this every web site I design I do, but I have yet to actually find a real good way to do it. A company usually gives me their logo, I center it in the middle of the screen for when you go to the page, and then it auto forwards you to the home page. I can not seem to find a good way to center an image in the middle of the screen without a bunch of tables and divs! Any good suggestions?!
You could try using a div in your HTML like this:
<div id='dv'></div>
And using a background image like this:
#dv {
background: url('http://pieisgood.org/images/slice.jpg') no-repeat 0 0;
background-position: center;
}
html,body,#dv { /* so that the #dv can fill up the page */
width:100%;
height:100%;
}
Fiddle
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
<body>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMtBiLioXqfhufpptex_ta8kGJa5UDQS3aITpBetR8EwH5GGDTJw" />
</body>
Related: Center a div
Personally, I like using the display: table-cell method.
For example, if my HTML is:
<div class="wrapper">
<img src="http://placehold.it/150x50" alt="Company ABC" />
</div>
Then my CSS should be:
div.wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 600px;
height: 200px;
}
If I'm unable to use the above method, another viable option is to use the line-height property.
HTML for line-height method:
<div class="wrapper">
<img src="http://placehold.it/150x50" alt="Company XYZ" />
</div>
CSS for line-height method:
img {
line-height: 300px;
}
You could use JavaScript to calculate the center point and position it with either margin or top (with position:relative/absolute), but this isn't really clean.
I'm assuming you're talking about a splash page, so here is a simple example (although in other circumstances I do not recommend modifying the body tag as I have done):
<!doctype html>
<html>
<head>
<title>blah</title>
<style type="text/css">
html,body {margin:0;padding:0;width:100%;height:100%;}
body {display:table;}
p {display:table-cell;text-align:center;vertical-align:middle;}
</style>
</head>
<body>
<p>Hello World - This could have an image in it</p>
</body>
</html>
The trick is in the CSS:
The item you wish to center both horizontally and vertically is displayed as a table cell: display:table-cell
The parent (container) of the item you wish to center is displayed as a table: display:table
Make sure the table display element is consuming the entire area which you would like to center against.
The item you wish to center must be told to align horizontally (text-align:center declaration) and vertically (vertical-align:middle declaration)
The text-align and vertical-align properties only work this special way because the element is displayed as a table-cell
You don't say if the image size is known.
There are a couple of ways to do this, I favour some CSS like so on an image with id="centreme" (if the image is 200x200) and a wrapper for the entire page
div#contentwrapper {
width:100%;
height:100%;
position:relative;
}
img#centreme {
position: relative;
width: 200px; /* the image width */
height: 200px; /* the image height */
top: 50%;
left: 50%;
margin-top: -100px; /* half the image height */
margin-left:-100px; /* half the image width */
}
fiddle for you to play with http://jsfiddle.net/7PYzB/2/
Related
<div class="container">
<div class="fullscreen">
<div class="textbox">Testing</div>
</div>
</div>
I'm trying to have an image fully show up based on the size of a screen, and to have text ("Testing" in the textbox class) show up in a precise designated area in the image, as shown above.
Trying to get the above to work with this codepen, but I am defeated to admit that after an hour of fiddling with css, I am nowhere close.
It is pretty frustrating that css doesn't seem to work as expected, where the image doesn't seem to want to nest to full height etc.
I would like to suggest if you add image using img HTML tag you have better control on image in relation with "Testing" text. Please check below my snippet. You can adjust position of "Testing" by "top" position on ".textbox" class :
.container{
min-height: 100%;
margin: 0;
padding: 0;
}
.fullscreen{
width: auto;
height: 100%;
margin: 0;
padding: 0;
position:relative;
}
.textbox{
position:absolute;
top:55%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index:3;
text-align:center;
}
<div class="container">
<div class="fullscreen">
<img src="http://print.drawmaticar.com/preview.jpg" style="width:100%;"/>
<div class="textbox">Testing</div>
</div>
</div>
Try this:
background: url('path/to/img.jpg') no-repeat center center / cover;
Normally, if you call the image in background means need to add the padding-bottom in percentage.. It means the image height/width*100
css
.fullscreen {
padding-bottom: 129.411%;
}
Backgorund Image
you have to make background-size:cover instead of 100% and make height:100vh to make it visible.
I want to use three <div> areas on my web page: Header, Content and Footer.
The Footer <div> is supposed to stick to the bottom of the web page.
The Header <div> is supposed to stick to the top of the page.
The Content <div> is supposed to fill the whole area in the middle of the page.
So this is the basic layout:
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
For the Footer to stay down the page I added
#footer
{
position: fixed;
bottom: 0;
}
For the Content <div> I'm using a background image, scaling exactly to the div element's dimensions:
#content
{
background: url("Bilder/Bild.png") center contain no-repeat black;
}
Now I want the Content <div> to be exactly the remaining height of the ViewPort between Header and Footer without adding any JavaScript, no matter what content is later added to the Content <div>.
How can I do that in CSS3?
If the size of footer and header is known, you can use calc(). So assuming both take 100px together, this should work:
html, body { height: 100%; }
#content {
height: calc( 100% - 100px );
}
Be aware, though, that old browsers do not support this. Also have a look at the compatibility table for the prefixes that might be needed.
Example Fiddle
you could use something like this. it will allow you to keep your positions in a range of resolutions.
#header {
position: fixed;
height: 10%;
}
#content {
position: fixed;
height: 80%;
top: 10%;
}
#footer {
position: fixed;
bottom: 0px;
height: 10%;
}
check it out here
Please Help me to center the message box on fit on any screen resolution..
can you show what css or style, margins, left, right,that I can use?
Center Horizontally
To center a div horizontally you can use margin: auto auto; width: 500px where the width is any width you want it to be.
JS Fiddle
HTML:
<div id="content">
Some content
</div>
CSS:
#content {
width: 200px;
margin: auto auto;
background-color: #CCC;
}
Center screen with fixed dimensions
If you can fix the content height and width then it's possible to center the div both horizontally and vertically using just css. This is achieved by wrapping your content in another div, then positioning your content div's top: 50% and then subtracting half the height of it's margin from it: margin-top: -100px, assuming the height was 200px. See example below:
JS Fiddle.
HTML:
<div id="wrapper">
<div id="content">
Some content
</div>
</div>
CSS:
#wrapper {
position: relative;
background-color: #EEE;
width: 200px;
height: 200px;
font-size: 10px;
}
#content {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
background-color: #DDD;
}
Pretend it's vertically centered
Also you can give a fixed margin-top (or top with position: absolute) to make it seem vertically centered in most desktop and laptop screens.
JS Fiddle
HTML:
<div id="content">
Some content
</div>
CSS:
#content {
width: 200px;
margin: 100px auto;
background-color: #CCC;
}
Use Javascript
It is not possible to vertically center content with arbitrary height using just css. In this case you will need to use Javascript to position the div.:
The basic idea is:
you calculate the height of the content at the time you need to show the content, or when the content is loaded.
Then change any of the many css properties to position the div at the vertical center.
My personal preference is you to use position: absolute with top property. You can also use margin-top but you probably don't want this div to take up space in the box model if you have other content on the page.
JS Fiddle
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var el = $('#content');
var elWidth = el.width();
var elHeight = el.height();
el.css({
position: 'absolute',
top: (windowHeight / 2) - (elHeight / 2),
left: (windowWidth / 2) - (elWidth / 2),
});
});
</script>
<style>
#content {
width: 200px;
height: 200px;
background-color: #CCC;
}
</style>
</head>
<body>
<div id="content">
Some content
</div>
</body>
</html>
Use any of the many Javascript "plugins" available
There is a multitude of CSS frameworks around the web that provide boilerplate CSS that we use on most websites. And some of these also help with these kind of common presentation issues with small Javascript plugins. Personally I know that Twitter Bootstrap provides a Modal plugin which you can use for this purpose. There is also many jQuery plugins for the sole purpose of centering content in a page.
Conclusion
Although there is a multitude of options to achieve this, I it sad to see that CSS still does not support doing this. Maybe it's a hard thing to do across different scenarios, I don't know. From the options that I mention above, I think the Javascript option is the most versatile, and with todays browser speeds, and the likeliness that nobody would have Javascript disabled on their browser, this would be the best way to go.
I just saw this after reading about how to do one on a CSS Techniques page.
Basically, define a little CSS:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
ADVANTAGES:
Cross-browser (including IE8-10)
No special markup, minimal styles
Responsive with percentages and min-/max-
Use one class to center any content
I have not had time to test it out, but I wanted to post it up here in the hope that it helps others.
Here is what you are searching for http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/
You can easily make it with jquery! Or with an css solution given on this site!
You should give us your code that you have tried. Assume that you have HTML code like below:
<div id="message">
Hello World!
</div>
CSS code:
#message {
width: 100px;
height: 100px;
margin: 50px auto;
}
Then your message box will be 100x100 and 50px from the top of the screen and automatically aligns to the center of the screen.
I'm not sure if I can do this, but this comes so close, I can't imagine it is impossible.
I'm aiming for a pure CSS/HTML solution.
I want two images with natively different heights to appear side by side with equal heights.
I want the left image to cover 60% of a div, the right image can have the remaining 40% (I know it will be less than 40% wide, but not its exact width).
The combo should appear in a div that covers 70% of the window width, regardless of the window size. Example of layout
Both images should retain their aspect ratio. Above left drawing shows a browser window with the unscaled images, the second is where the div covers about 60% of the window width, with the images showing in equal heights, and regardless of the browser window width, these percentages should remain unaltered, as I tried to show in the third and fourth diagram.
I've tried numerous variations, but often the right image wraps under the left one if the window becomes too small, or the images only scale with window height, which is definitely not what I want.
Here's a bare-bones example of my solution, using an embedded stylesheet:
<!DOCTYPE html>
<html>
<head>
<title>Stackoverflow Question</title>
<style>
div {
height: /*unfortunately cannot be a percentage*/ 200px;
width: 70%;
}
img.leftimage {
float: left;
width: 60%;
height: 100%;
}
img.rightimage {
float: right;
width: 40%;
height: 100%;
}
</style>
</head>
<body>
<div>
<img src="droids.jpg" class="rightimage" />
<img src="WinZip.png" class="leftimage" />
</div>
</body>
</html>
Here is a fiddle using colors instead of images, and if it matters these are the images I used above - clearly different height/width ratios:
Kitting the beg borrow and steal together, I get this working example:
<!DOCTYPE html>
<html>
<head>
<title>Stackoverflow Question</title>
<style type="text/css">
.aspectwrapper {
display: inline-block; /* shrink to fit */
width: 40%; /* whatever percentage of window's width you like */
position: relative; /* so .content can use position: absolute */
}
.aspectwrapper::after {
padding-top: 40%; /* play with this to fit both images in one line */
display: block;
content: '';
}
.content {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0; /* follow the parent's edges */
outline: thin dashed green; /* just so you can see the box */
overflow: hidden;
}
.images {float: left;}
img {width: auto;height: 100%;}
</style>
</head>
<body>
<div class="aspectwrapper">
<div class="content">
<div class="images">
<img src="img1.jpg" />
<img src="img1.jpg" />
</div>
</div>
</div>
</body>
</html>
I don't want to center a div, I want the contents of a div to be centered. I would like horizontal and vertical alignment.
Sorry, if this is too easy or whatever, but this is kind of a hassle to get it right.
Grae
I am using IE7
If you know the height and width of your image, position it absolutely, set top/left to 50% and margin-top/left to negative half the height/width of your image.
#foo {
position:relative; /* Ensure that this is a positioned parent */
}
#foo img {
width:240px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-120px;
margin-top:-100px;
}
Live example: http://jsfiddle.net/Zd2pz/
I know you've said that dont want to center a div but to achieve your requirement in a cross browser way would be easier using a jquery plugin and a fake div that contains your element to be centered.
I have successfully centered almost anything using this very small plugin that can center any block element.
The only other way I know are the answer that you already received from #simshaun & #Prhogz
EDIT: As per comment request
Include the script in your head tag
<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/jquery.center.min.js" )%>"></script>
Now if you have a DIV that you want to center inside your markup simply use it as
$(document).ready(function() {
$("#myDIV").center({ vertical: false });
});
although the following is obsolete, it still works for almost all browsers
<center>
<div>
your html
</div>
</center>
however, visit this link
http://www.110mb.com/forum/vertical-horizontal-alignment-of-image-within-div-t31709.0.html
For horizontal alignment, use text-align:center;
For vertical alignment, see for example the W3 style guide
If you know the inner element's height beforehand,
CSS:
.container {
text-align: center; /* Center horizontally. */
/* For demo only */
border: 1px solid #000;
height: 500px;
margin: 20px;
width: 700px;
}
.container img {
margin-top: -167px;
position: relative;
top: 50%;
}
HTML:<div class="container">
<img src="http://farm6.static.flickr.com/5004/5270561847_7223069d5e.jpg" width="500" height="334" alt="">
</div>
Example