I have a logo (775 X 225) that I would like to center (both vertically and horizontally) in a web page and then have a link "Enter", placed underneath it
<html>
<head>
<Title> My website </Title>
<style type="text/css">
//centerlogo CSS class here ?
</style>
</head>
<body lang=EN-US>
<div class'centerlogo"> <span></span>
<img src="images/logo.jpg">
</div>
</body>
</html>
what is the best way to do this so that it is centered both vertically and horizontally and works in all browsers?
Can someone show me the CSS class if its the best method - or javascript code if it is the best method?
I tried looking at a few examples on here, but couldn't get any of them to work with my image.
thanks
Since the logo is a known size, then you can position it absolutely with negative margins equal to half the width and height.
.centerlogo {
position: absolute;
width: 775px;
height: 225px;
top: 50%;
left: 50%;
margin-left: -387px; //Half the width
margin-top: -112px; //Half the height
}
This will remain in the exact center of the screen regardless of the size of the window.
Do something like this on the item you want centered.
Here is an example of the output: http://jsfiddle.net/FjLQY/1/
img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 128px; /* height of item */
height: 128px; /* width of item */
}
Related
I have a page with many images in divs and the layout looks good only in full size, when the browser window is smaller it's really messy. I found a similar question on stack overflow but their answers don't work for my case.
EDIT: I did everything what you guys advised but it still doesn't work.
<!DOCTYPE html>
<html>
<body background="">
<head>
<style>
div.asciigun {
top: 30%;
left: 50%;
position: absolute;
max-width: 100%;
}
</style>
</head>
<body>
<div class="asciigun">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU7ROirglSjKnpsLvt29uCDlVtpZutirtiXyg3FF0UtXFf0TnE" height="90%" width="90%" >
</div>
</body>
</html>
Let's try another approach. Try not to modify max-width or max-height. Just leave it as it is (or set width: 100% and height: 100%).
And then change <img src="url.jpg"> to background: url("url.jpg"); and then just do
.image {
background-size: cover;
}
or
.image {
background-size: contain;
}
Ok I figured it out! I needed viewport value instead of %. Now images go proportionally with browser size and stay in place.
div.asciigun {
position: absolute;
top: 30vw;
left: 74vw;
z-index: 1;
width: 30vw;
height: 15vw;
}
Fixed elements are aligned perfectly on desktop (bottom and right are aligned to the browser window). But on mobile the elements are aligned to the container size.
This is how it look on mobile (the black line represent the screen):
This is how I want it to look on mobile (the black line represent the screen):
Example code (In my real life application the canvas need to be larger than the viewport (hence the 150vh and 150vw size of the canvas)):
html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div class="container">
<div class="fixedElement">I AM A FIXED ELEMENT</div>
<div class="fixedElement2">I AM A FIXED ELEMENT 2</div>
</div>
</body>
css
body {
margin: 0;
}
.container {
width: 150vw;
height: 150vh;
background-color: orange;
}
.fixedElement {
position: fixed;
top: 50px;
right: 200px;
}
.fixedElement2 {
position: fixed;
bottom: 50px;
left: 200px;
}
Codepen example
Any suggestions on how to fix this?
Just add the following rule to the css of the body:
body {
width: 100vw;
}
I created a codepen example that worked for me: Example on Codepen
I hope that is what you searched for.
try
.container {
width: 100vw;
height: 100vh;
}
or
html,body,.container{
height:100%;
width:100%;
}
You are mixing units there (vw and px).
The vw unit is relative to the width of the viewport. Setting this value to 150vw makes your "canvas" (the div-container with class container) 150% wide. It extends the body or the viewport by 50% to the right.
Setting your fixed elements position values to a fixed unit right: 200px might work in some viewports but sure enough not in all. The wider the viewport the wider your container (150vw) but the 200px will always be the same.
I have a div that is centered on the middle of the screen. I need to pass some text to the div and the text will be of various lengths. The problem is that when I pass text to the div, it changes size but wont stay centered. Here's a JSFiddle that demonstrates the problem.
I currently center the div like this:
position: absolute;
top: 50%;
left: 50%;
Add this line:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
http://jsfiddle.net/h0d097vp/3/
Your div is not centered. The existing positioning centered the top left corner of the div.
Try this:
#divError{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
JSfiddle Demo
Can you set constant width?, if so here's your answer JSFiddler
Just added
width: 100px;
right: 0;
left: 0;
margin: auto;
Your div is not centered in the beginning either. left: 50% means that the diff starts at 50%, which means that the start of the div is at the center of the page.
When the div has a width of 200px, than still only the start will be at the center.
You can give the div a fixed width, and than add a negative margin of half the width so the div will really be in the center of the page.
Like
#divError{
width: 200px;
margin-left: -100px;
}
When using top and left they position whichever side they are named directly at the position given. So left: 50% will always have the leftmost side positioned directly at the 50% mark. This is not the center, but starts the left side of the div at the center. The same occurs with top: 50%. In order to use top and left you'd need to know the overall width and height and subtract half of their value from their respective top and left (e.g left: calc(50% - ([width of element] / 2)). Since you are using dynamic content you can't know either the height or the width (unless you make them static.)
So what can you do? There are a few ways, but my favorite at the moment is fairly new. It's called flexbox. It's support is decent. There's a nice snippet from css-tricks as well.
The relevant code to center an element both vertically and horizontally would go like this:
$(document).ready(function() {
$("button").click(function() {
$.get("http://lorem.mannfolio.com/", function(data) {
var lorem = data.split("\n\n");
$(".centered").html(lorem[0]);
});
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
border: 1px solid black;
}
button {
position: fixed;
top: 10px;
left: 10px;
}
<button>Change text</button>
<div class="container">
<div class="centered">I'm centered No matter what you put in me.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have a main image and little callout buttons on top of the main image. I'm trying to get the callout buttons to stay in position when the screen size changes while the main image size resizes with max-width and background-size: contain, but right now, the callout button's position changes.
Here is the CSS:
.main_image
{
background: red;
height: 400px;
background-size: contain;
position: relative;
max-width: 100%;
}
.callouts
{
background-image: url(http://www.autotintspecialist.com/zoomButton_moused.png);
height: 70px;
width: 40px;
height: 30px;
position: absolute;
top: 70px;
right: 180px;
}
Here is the HTML:
<div>
<img class="main_image" src="http://autotintspecialist.com/sOff_off.jpg">
</div>
<div class="callouts"></div>
Here is the link to the fiddle: http://jsfiddle.net/Nem2C/
As you resize the image, the callout button changes position, but I need it to stay where it's at when the image resizes.
is there a jquery solution or a javascript solution to this as well?
I tried to fix this. I didn’t finish, but I got closer to the solution.
See this jsFiddle. I put div.callouts inside the div with the image and positioned it relative to that with percentage values.
<div class="image_wrapper">
<img class="main_image" src="http://autotintspecialist.com/sOff_off.jpg">
<div class="callouts"></div>
</div>
.image_wrapper {
position: relative;
}
.callouts{
top: 15.5%;
right: 24.1%;
}
To calculate the correct percentage value from, for example, the top, use the formula (image_height_in_pixels / pixels_from_the_top) * 100.
The problem with what I have now is that the callout x-position doesn’t scale with the width properly for some reason.
I have being researching regarding this question for a long time but I was not lucky. Here is the situation. Assume you have a blue rectangle in the center of the page. When you go full screen, we can use percentage for height and width to preserve the ratio of rectangle. However, the position of rectangle changes and it moves up and you end up with extra space at the bottom of the page.
So what should I do to keep rectangle in the center of the page (equal vertical and horizontal distance) when full screen mode is enabled? In other words, if your screen is 1280x800, center of rectangle be at (640,400)
If you check home page of Chrome browser, when you go full screen, the position of apps stay the same and you don't end up with extra space at the bottom. Appreciate your help
Define width of the rectangle and use margin: 0 auto; to center it in page horizontally.
If you want to center a div horizontally and vertically, use something like this
HTML
<div id="rectangle"></div>
CSS
#rectangle {
width: 30%; //can set any value here
height: 20%; //can set any value here
position: absolute;
left: 50%;
top: 50%;
margin-left: -15%; //negative half of width
margin-top: -10%; //negative half of height
background-color: red;
}
See the fiddle here.
OR
HTML
<div id="wrapper">
<div id="container">
<div id="rectangle"></div>
</div>
</div>
CSS
body, html {
height: 100%;
overflow:hidden;
}
#wrapper {
width: 100%;
height: 100%;
overflow: visible;
position: relative;
}
#wrapper[id] {
display: table;
position: static;
}
#container[id] {
display: table-cell;
vertical-align: middle;
width: 100%;
}
#rectangle {
width: 200px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
See the fiddle here.
Have you tried also using percentages for the margins, for example if you centre square was 60% tall and wide you could add the 20% as a margin so that would also scale up. Without trying I don't know if it would give you the desired effect but it should fix the issue of the square moving up.
oops,
I forget that I am working on an iMac.
the if addition in the script solved my problem.
function vertical_center()
{
var ww = $(window).width();
if (ww < 1600)
{
$("#character").css({'width': ww + 'px','height': (ww/4) + 'px', 'margin-top': -(ww/8) + 'px'});
}
else
$("#character").css({'width': ww + 'px'})
}
Yet, I would be glad if someone looks over my code telling me where some silly things remain.
Hope this post added something nevertheless, thank you guys