This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to center div horizontally and vertically
I need to put image in center of html page, both vertical and horizontal ... been trying few stuff but seems to work fine. To get horizontal alignment I used
<body style="text-align:center">
and it works fine, but what do with vertical alignment?
regards
If:
X is image width,
Y is image height,
then:
img {
position: absolute;
top: 50%;
left: 50%;
margin-left: -(X/2)px;
margin-top: -(Y/2)px;
}
But keep in mind this solution is valid only if the only element on your site will be this image. I suppose that's the case here.
Using this method gives you the benefit of fluidity. It won't matter how big (or small) someone's screen is. The image will always stay in the middle.
Put your image in a container div then use the following CSS (changing the dimensions to suit your image.
.imageContainer{
position: absolute;
width: 100px; /*the image width*/
height: 100px; /*the image height*/
left: 50%;
top: 50%;
margin-left: -50px; /*half the image width*/
margin-top: -50px; /*half the image height*/
}
Hey now you can give to body background image
and set the background-position:center center;
as like this
body{
background:url('../img/some.jpg') no-repeat center center;
min-height:100%;
}
There are a number of different options, based on what exactly the effect you're going for is. Chris Coyier did a piece on just this way back when. Worth a read:
http://css-tricks.com/perfect-full-page-background-image/
Related
This question already has answers here:
Can I have multiple background images using CSS?
(8 answers)
Closed 2 years ago.
I have one background image which has a nice funky red sparkly light design which I am using on all of the webpages, and I have a 2nd funky background I want to use on a the final page. This site is within a Wordpress template. The first red funky background is on all the pages, the final page I want to have the 2nd background image (more gold elements in it) on top of the standard background so that the first background kinda acts like a boarder and just spills to the next page break.
Can someone provide an example of this code in html and css? You can use any two images of your choice as long as both fill up most of the screen with the one on top only a little smaller.
solution:
div {
width: 300px;
height: 300px;
background-image: url("https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
background-size: cover;
position: relative;
}
div::before {
content: '';
position: absolute;
background-image: url("https://image.slidesharecdn.com/lighterdot-140328042229-phpapp02/95/making-your-slides-lighter-9-638.jpg?cb=1434979032");
background-size: cover;
top: 15%;
left: 15%;
bottom: 15%;
right: 15%;
}
<div>test</div>
You can do it with absolute positioning.
img{
position:absolute;
}
.img1{
width:30%;
height:50%;
}
.img2{
width:29%;
height:46%;
margin: 0.5%;
}
<img class="img1" src="https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></img>
<img class="img2" src="https://image.slidesharecdn.com/lighterdot-140328042229-phpapp02/95/making-your-slides-lighter-9-638.jpg?cb=1434979032"></img>
I would like to know how to put an object in the middle of HTML page. Not the perfect center. The object is a clock down and it appears in the top left part of the page. I want to set it in the top center. Is this something with the CSS or the HTML settings of the code?
Thanks!
Try to use first google next time. have a try for this
Two CSS options:
put text-align:center; on the parent element
or set a width value and margin-left: auto; & margin-right:auto;
on the element itself.
Ok since you said top center, I assumed you didn't wan't vertical.
do this on the element:
position: absolute;
top: 50%;
left: 50%;
width: 120px; /*replace with your value*/
height: 120px; /*same*/
margin-top: -60px; /*needs to be negative half size*/
margin-left: -60px; /*same*/
Here's an example. Replace #test with your element.
https://jsfiddle.net/hqpntcax/
I'm looking to center text both vertically and horizontally over an image that grows when the page gets wider.
I originally had the image set as the background for a div of fixed height, in which case it was relatively easy to center it, but because background images aren't structural, I couldn't set the height to be an automatic function of the width, and I had to toss this option out when I went for a more responsive design.
So I've currently got a div with two elements in it, img and overlay text. The image width is set to 100% of the width of its container, and the height varies accordingly. As a consequence, though, I can't set the overlay text to be postion:absolute and top:80px or something, because the distance from the top will have to vary. And even doing top:25% or whatever doesn't work, because a) if that page width shrinks to squeeze the text, or if there's just more text, the vertical centering is thrown off when there are more/less lines, and b) the percentage is arbitrary -- it's not 50 or something, because that would put the top of the text overlay 50% down the image, when I want the center of the overlay to be there.
I've looked, among other things, at this post, which is definitely close -- but in both solutions, the image height is incapable of resizing, and in the former, the JS loads at page load, but then freezes, so that if I change page width/height, things get out of whack. Ideally, this solution wouldn't involve JS for just that reason (even if it reloaded on every resize, that feels non-ideal), but if that's the only solution, I'll take it.
Also, just for added details/fun, I've set a max-height on the image, because I don't want it to exceed roughly 300px height, even on a cinema display.
Basic fiddle of current attempt here, and identical code below. Any ideas? Thanks!
html
<div class='quotation_div'>
<img src='http://www.mountainprofessor.com/images/mount-ranier-mount-features-2.jpg'>
<div class='overlay'>
<p>Any reasonable amount of text should be able to go here. I want it to be able to center vertically even if it takes up 2 or 3 lines.</p>
</div>
</div>
css
.quotation_div {
position: relative;
display: table;
}
img {
width: 100%;
max-height: 300px;
}
.overlay {
z-index: 99;
width: 70%;
margin-left: 15%;
vertical-align: middle;
position: absolute;
top: 25%; /* Obvious problem, cause it's arbitrary */
}
p {
text-align: center;
color: red;
font-size: 165%;
font-weight: lighter;
line-height: 2;
}
You can use CSS background-size to set the width to 100% and the height will be calculated to maintain aspect ratio.
Here's a fiddle using that technique.
If you want the image as an HTML element then I suggest you set it's position to absolute and use the same method of disply:table-cell to center the overlay:
Here's a fiddle using that method, this one stretches the image because of the max-height.
Please Try the below css for .overlay as in your fiddle
.overlay {
z-index: 99;
width: 70%;
/* height: 100%; */
/* margin-left: 15%; */
/* vertical-align: middle; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
or this is the updated fiddle link http://jsfiddle.net/hLdbZ/284/
I use this combination:
.CONTAINER {
position: relative;
text-align: center;
}
.TEXT {
text-align: center;
position: absolute;
top: 50%;
left: 0;
right: 0;
}
.IMG {
//for responsive image
width: 100%;
height: auto;
}
I just added to the html
<div align="center"></div>
to surround your existing code to get the image to center
hope that helps
I want to create an header image for my website.
I would like the image is always in the middle would have standing. When someone's browser reduced, the image in the center stand. Now I have an example that this site contains only get there no matter how this is done.
http://aarkcollective.com/
#Leeish has the right idea.
Another way is to use the following css
.center_element {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* half of the height of the header */
margin-left: -150px; /* half of the width of the header*/
}
With the HTML:
<img class="center_element" src="images/header_image.jpg" width="300" height="100">
div{
margin: 0 auto;
width: [whatever]%;
}
As long as your image/div has a fixed width or percent so it scales, it will stay centered with a left and right margin of auto. This is probably a duplicate question so you should probably look around for another answer.
EDIT
I am editing my answer based on your comments. I made this fiddle to do what I was talking about. http://jsfiddle.net/P8eDT/ I put two divs in it. One with an image and one without so you can see. The inner div is flexible width, set height, and stays centered. The image inside the second one is "responsive" in that it will always match the width of the div. As far as I can tell this is exactly what they are doing in your example site you posted. Posted below is the code for the INNER div (The one that is the image).
#inner {
width: 50%;
height: 100px;
margin: 0 auto;
background-image: url(/path/to/image.jpg);
background-size: cover;
background-position: center;
}
Please note you will need a javascript fall back for older versions of IE that do not support background-size:cover. I've done this before and I just use javascript to measure the width/height and which ever is longer I just set that one.
you can use position:fixed in your css
say that your header has a class of .header and a width and height of 800x50
in your css try:
.header{position:fixed; top:50%; left:50%; margin:-25px 0 0 -400px;}
edit if you do not want it to center vertically Leeish has the better solution
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
I have a css class defined so I can make a div to use all the browser's viewport, the rule is the following:
.fullscreenDiv {
background-color: #e8e8e8;
width: 100%;
height: auto;
bottom: 0px;
top: 0px;
left: 0;
position: absolute;
}
Now I want the text inside the div to be in the exact center of the screen so, vertical align center and horizontal align middle, but I can't seem to find the proper way to do so.
It only needs to work on webkit based browsers.
I already tried to add a P element inside with display set to table-cell (a common way of centering text) without luck.
Any suggestions?
The accepted answer works, but if:
you don't know the content's dimensions
the content is dynamic
you want to be future proof
use this:
.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
More information about centering content in this excellent CSS-Tricks article.
Also, if you don't need to support old browsers: a flex-box makes this a piece of cake:
.center{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Another great guide about flexboxs from CSS Tricks; http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The standard approach is to give the centered element fixed dimensions, and place it absolutely:
<div class='fullscreenDiv'>
<div class="center">Hello World</div>
</div>
.center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
}
DEMO
There is no pure CSS solution to this classical problem.
If you want to achieve this, you have two solutions:
Using a table (ugly, non semantic, but the only way to vertically align things that are not a single line of text)
Listening to window.resize and absolute positionning
EDIT: when I say that there is no solution, I take as an hypothesis that you don't know in advance the size of the block to center. If you know it, paislee's solution is very good
text-align: center will center it horizontally as for vertically put it in a span and give it a css of margin:auto 0; (you will probably also have to give the span a display: block property)