I have an element which is an image within a div id. I am going to make this page a under construction page. I made the div with a "margin: auto" css command. What is away vertically that I can have the div auto center to any browser accessed by the site?
New to this don't know how to do the whole JSFiddle thing lol
Heres a url too: http://nerissagrigsby.com/?page_id=5
My CSS:
#openpagesig {
width: 803px;
height: 283px;
margin: auto;
}
My HTML:
<body>
<div id="openpagesig">
<img src="img/LoginSignature.png" width="803" height="283" alt="Login Signature"
/>
</div>
<!-- Open Page Signature -->
</body>
Have you tried the following CSS:
.inTheMiddle { /* or "#myImageId" (or just "img" if it's the only one) */
position: absolute; /* or "fixed" */
/* The element you want to place in the middle of the page
center should have explicitly defined dimensions: */
width: 100px;
height: 100px;
top: 50%;
margin-top: -50px; /* offset back at exactly half height of the element */
left: 50%;
margin-left: -50px; /* offset back at exactly half width of the element */
}
Here's a working example.
Do I need to mention, that this works even in Internet Explorer 5.5! ... but I doubt this browser is still relevant to anyone.
Please refer to the image below to see how the negative margins help:
Try something like:
.centeredDiv {
width:17em;
height:9em;
position:absolute;
left:50%;
top:50%;
margin:-135px 0 0 -155px;
padding:1em;
background-color:#fffff7;
opacity:0.67;
filter:alpha(opacity=67); /* for IE8 and earlier */
border:2px solid #191919;
}
Obviously editing measurements and colours to suit.
The problem you're having is related to vertically aligning div elements on a page. This is a common problem in HTML and CSS coding.
One solution is to have a container element within an outer div tag. The outer div should be set to display: table; and position: fixed; with 100% width and height as well. Set the inner div to display: table-cell; with the vertical-align: middle; property.
Furthermore, the outer div should have text-align: center; in order to center its child elements.
Here is the code you need:
.outer {
display: table;
height: 100%;
width: 100%;
text-align: center;
position: fixed;
}
.container {
display: table-cell;
vertical-align: middle;
}
An example from jsbin:
http://jsbin.com/otolot/1/
Try resizing the window to see that this works.
Personally I use something like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<div class="container">
<div class="container-content">
<div class="content">
<img src="//placehold.it/803x283" />
</div>
</div>
</div>
</body>
</html>
<style>
html, body {
height: 100%;
}
.container {
display: table;
width: 100%;
height: 100%;
margin: auto;
}
.container-content {
display: table-cell;
width: 100%;
vertical-align: middle;
}
.container-content > .content {
max-width: 803px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
</style>
This solution works very nicely, because not only does it vertically center the content, but if the browser windows height is too small to display it all, you can still scroll to see all of the content which is one of the major drawbacks of using other methods.
Example:
http://jsbin.com/owayec/2/
Related
The problem is my layout does not break on zoom out or in, it just wraps to the left, so at the smallest zoom you would see my layout in the leftmost part of the browser screen.
While I want my layout to decrease in size but not float left. I want it to remain centered perfectly all the time every single zoom.
How do I do that?
<body class="body">
<div class="wrapper">/</div>
<script src="js/jquery.js" type="text/javascript"></script>
</body>
.body {
position: absolue;
top: 0%;
margin: 0 auto;
width: 1366px;
height: 768px;
background: white;
}
.wrapper {
position: absolute;
left: 20%;
right: 20%;
margin: 0 auto;
min-height: 100%;
background: black;
}
On your body tag, put text-align: center; this should keep everything centered even when zooming.
I'm not sure what isn't working about your code.
Here's an example of the code you provided in jsFiddle which appears to be centering fine at any zoom level.
Working Demo in Fiddle
Traditionally the trick to centering a div is margin: 0 auto;
But you're doing that, so I think you're okay.
Is there any other formatting you have that is interfering? Can you provide more info?
You can try this:
<body>
<div id="page-wrap">
<!-- all websites HTML here -->
</div>
</body>
body {
text-align: center;
}
#page-wrap {
text-align: left;
width: 800px;
margin: 0 auto;
}
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 7 years ago.
Is there a way to CENTER A DIV vertically and horizontally but, and that is important, that the content will not be cut when the window is smaller than the content The div must have a background color and a width and hight.
I have always centered divs with the absolute positioning and negative margins like in the example provided. But it has the problem that it cuts the content on top. Is there a method to center the div .content without this problem?
I have the example here to play: http://jsbin.com/iquviq/1/edit
CSS:
body { margin: 0px; }
.background {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: yellow;
}
/*
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?:
*/
.content {
width: 200px;
height: 600px;
background-color: blue;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;/* half width*/
margin-top:-300px;/* half height*/
}
HTML:
<div class="background">
<div class="content"> some text </div>
</div>
My question is not duplicate of "How to center an element horizontally and vertically? " 1- My question was asked before. (just check dates). 2- My question ask very clearly and in black as condition: "the content will not be cut when the window is smaller than the content"
For modern browsers
When you have that luxury. There's flexbox too, but that's not broadly supported at the time of this writing.
HTML:
<div class="content">This works with any content</div>
CSS:
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Tinker with it further on Codepen or on JSBin
For older browser support, look elsewhere in this thread.
After trying a lot of things I find a way that works. I share it here if it is useful to anyone. You can see it here working: http://jsbin.com/iquviq/30/edit
.content {
width: 200px;
height: 600px;
background-color: blue;
position: absolute; /*Can also be `fixed`*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
max-width: 100%;
max-height: 100%;
overflow: auto;
}
Here's a demo:
http://www.w3.org/Style/Examples/007/center-example
A method (JSFiddle example)
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
#content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
HTML:
<div id="content">
Content goes here
</div>
Another method
(JSFiddle example)
CSS
body, html, #wrapper {
width: 100%;
height: 100%
}
#wrapper {
display: table
}
#main {
display: table-cell;
vertical-align: middle;
text-align:center
}
HTML
<div id="wrapper">
<div id="main">
Content goes here
</div>
</div>
The legitimate way to do that irrespective of size of the div for any browser size is :
div{
margin:auto;
height: 200px;
width: 200px;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background:red;
}
Live Code
You can compare different methods very well explained on this page: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
The method they recommend is adding a empty floating element before the content you cant centered, and clearing it. It doesn't have the downside you mentioned.
I forked your JSBin to apply it : http://jsbin.com/iquviq/7/edit
HTML
<div id="floater">
</div>
<div id="content">
Content here
</div>
CSS
#floater {
float: left;
height: 50%;
margin-bottom: -300px;
}
#content {
clear: both;
width: 200px;
height: 600px;
position: relative;
margin: auto;
}
I do not believe there is a way to do this strictly with CSS. The reason is your "important" qualifier to the question: forcing the parent element to expand with the contents of its child.
My guess is that you will have to use some bits of JavaScript to find the height of the child, and make adjustments.
So, with this HTML:
<div class="parentElement">
<div class="childElement">
...Some Contents...
</div>
</div>
This CSS:
.parentElement {
position:relative;
width:960px;
}
.childElement {
position:absolute;
top:50%;
left:50%;
}
This jQuery might be useful:
$('.childElement').each(function(){
// determine the real dimensions of the element: http://api.jquery.com/outerWidth/
var x = $(this).outerWidth();
var y = $(this).outerHeight();
// adjust parent dimensions to fit child
if($(this).parent().height() < y) {
$(this).parent().css({height: y + 'px'});
}
// offset the child element using negative margins to "center" in both axes
$(this).css({marginTop: 0-(y/2)+'px', marginLeft: 0-(x/2)+'px'});
});
Remember to load the jQ properly, either in the body below the affected elements, or in the head inside of $(document).ready(...).
I'm trying to make text stay in the middle of a resizable DIV.
Here's the example:
CSS
#rightmenu {
position: absolute;
z-index: 999999;
right: 0;
height: 60%;
text-align: center;
}
HTML
<div id="rightmenu">This text should be center aligned and in the middle of the resizable rightmenu</div>
I've tried to make a Class to contain the text with the "margin-top and margin-bottom" both on auto, but doesn't work.
If you don't care about IE7 support, you can do it like that:
HTML:
<div id=wrap>
<div id=inside>
Content, content, content.
</div>
</div>
CSS:
#wrap {
/* Your styling. */
position: absolute;
z-index: 999999;
right: 0;
height: 60%;
text-align: center;
/* Solution part I. */
display: table;
}
/* Solution part II. */
#inside {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
The code: http://tinkerbin.com/ETMVplub
If you're OK with JavaScript you can try this jQuery plugin: http://centratissimo.musings.it/ but since it also doesn't seems to support IE7 the CSS solution is probably better.
Flexbox has really changed the game with aligning elements in a fluid manner. Define your container element to be display: flex and then to align your inner children you would use justify-content: center; align-items: center;
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.parent {
height: 500px;
width: 500px;
position: relative;
}
<div class="parent">
<div class="container">
<p>Hello</p>
<p>World</p>
</div>
</div>
You'll notice that "Hello" and "World" will both be vertically and horizontally centered within the .container element.
Replace height: 60%; with padding: 30% 0;.
If you want the text to be horizontally centered in a div, 'text-align:center;' is your friend. If you want it vertically centered; wrap the content inside an inner div, and then use 'margin: auto' for that inner div. Of course, you'll have to give the inner div a width; otherwise, the horizontal center won't work.
'valign="middle"' also works in tables if tables are an option (otherwise discouraged)
Check if this is needed:
<html>
<head>
<style type="text/css">
div {
height: 100px;
width: 100px;
background: #ccc;
text-align: center;
}
p {
line-height: 100px;
}
</style>
</head>
<body>
<div>
<p>centered</p>
</div>
</body>
</html>
I have the following markup code in my page:
<div id="root_img" style="width:100%;height:100%">
<div id="id_immagine" align="center" style="width: 100%; height: 100%;">
<a id="a_img_id" href="./css/imgs/mancante.jpg">
<img id="img_id" src="./css/imgs/mancante.jpg" />
</a>
</div>
</div>
And it does not appear as I expected, it looks like that:
But I wanted to get this result:
How can I center this image horizontally and vertically?
Here is a tutorial for how to center the images vertically and horizontally in a div.
Here is what you are looking for:
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background-color: #999;
}
.wraptocenter * {
vertical-align: middle;
}
<div class="wraptocenter">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
For vertical alignment, I would include some CSS to position it from the top 50% and then move it up half the number of pixels height of the image.
Horizontal, I would use a margin, as suggested.
So if your image was 100x100px you'd end up with.
<img id="my_image" src="example.jpg">
<style>
#my_image{
position: absolute;
top: 50%;
margin: -50px auto 0;
}
</style>
Image in a div horizontally and vertically.
<div class="thumbnail">
<img src="image_path.jpg" alt="img">
</div>
.thumbnail {
height: 200px;
margin: 0 auto;
position: relative;
}
.thumbnail img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
There are two aspects you need to address. First aspect is the horizontal alignment. This is easily achievable with the margin: auto applied on the div element surrounding the image itself. DIV needs to have width and height set to image size (otherwise this will not work). To achieve vertical center alignment you need to add some javascript to the HTML. This is because HTML height size is not known on the startup of the page and might change later on. The best solution is to use jQuery and write the following script:
$(window).ready( function() { /* listen to window ready event - triggered after page is being loaded*/
repositionCenteredImage();
});
$(window).resize(function() { /* listen to page resize event - in case window size changes*/
repositionCenteredImage();
});
function repositionCenteredImage() { /* reposition our image to the center of the window*/
pageHeight = $(window).height(); /*get current page height*/
/*
* calculate top and bottom margin based on the page height
* and image height which is 300px in my case.
* We use half of it on both sides.
* Margin for the horizontal alignment is left untouched since it is working out of the box.
*/
$("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"});
}
HTML page which is showing the image looks like this:
<body>
<div id="pageContainer">
<div id="image container">
<img src="brumenlabLogo.png" id="logoImage"/>
</div>
</div>
</body>
CSS attached to the elements looks like this:
#html, body {
margin: 0;
padding: 0;
background-color: #000;
}
#pageContainer { /*css for the whole page*/
margin: auto auto; /*center the whole page*/
width: 300px;
height: 300px;
}
#logoImage { /*css for the logo image*/
width: 300px;
height: 300px;
}
You can download the whole solution from our Company homepage at the following url:
http://brumenlab.com
This solution is for all size images
In this the ration of the image is also maintain.
.client_logo{
height:200px;
width:200px;
background:#f4f4f4;
}
.display-table{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.display-cell{
display: table-cell;
vertical-align: middle;
}
.logo-img{
width: auto !important;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class="client_logo">
<div class="display-table">
<div class="display-cell">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
</div>
</div>
You can set size of
.client_logo
accourding to your requirement
Try something like this:
<div style="display:table-cell; vertical-align:middle">
"your content"
</div>
using margin-top
example css
#id_immagine{
margin:0 auto;
}
I'm looking for a valid cross-browser solution for an HTML page which:
Consumes 100% of the screen height, with no overflow (i.e. no scrolling)
has a vertically (and horizontally) centered <div> which will hold the main content
I know vertical centering is possible when the wrapping container has a static height. Is adjusting this height to browser window height something feasable? (Preferably, no JS should be used.)
Depends on what you mean with "cross browser". Following works fine with all current, standards compatible ones (thus not IE6):
HTML:
<div id="a">
<div id="b">
<div id="content"></div>
</div>
</div>
CSS:
html, body, #a {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#a {
display: table;
}
#b {
display: table-cell;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
}
#content {
border: 5px solid red;
width: 100px;
height: 100px;
margin: auto;
}
Live example:
http://jsfiddle.net/mGPmr/1/
You could do something like this. It looks to work in IE6 as well:
<html> <head>
<script type="text/javascript"> </script>
<style type="text/css">
#container { height: 100%; width: 100%; position: relative; }
#content {
border: 5px solid red;
width: 100px;
height: 100px;
position: relative;
margin-left: -50px;
margin-right: -50px;
top: 50%;
left: 50%; }
</style>
</head> <body>
<div id="container">
<div id="content"></div> </div>
</body> </html>
Is simply not possible without JavaScript, at least not with CSS2 or earlier (not sure if CSS3 makes this possible, someone clarify on that).
The other provided answers require absolute width and height for the element; I assumed no such requirement. There's no way to center a flowing element vertically which is what you usually want, given that you don't know the aspect ratio of the browser window to reliably use fixed-size containers for content.