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/
Related
thiv.net/mobile needs to work on mobile, and it does, however when I turn my ipod to vertical, it changes drastically, my problem is i need the whole lot, textbox, button and image to be centered vertically, or change on rotate. I think centering the div vertically is the best option, so what css would i use?
Currently i have tried:
.center
{
position:absolute
top:40%;
bottom:40%;
height:20%;
}
But that doesn't work, so maybe it should only be centered after rotating?
Any ideas?
Try following CSS :
.center {
width: 100px;
height: 100px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
you can also follow the link of stack-overflow : Best way to center a <div> on a page vertically and horizontally?
If you know the height:
div.centered{
height: 100px;
top: 50%;
margin-top: -50px;
}
Optional: position: absolute | relative | fixed depending on what you want to achieve
the margin-top should always be 0 - half of the height of your div to center.
I'm currently changing a PSD design to a HTML site. I've come into an issue however. I am unable to center a certain element. I've tried all the usual tricks.
http://lowhop.net/
See here the main blue header is out of line (not centered). I tried
#slider{
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
Before, however it didn't work reliably. (Appeared only to work on my screen resolution/browser).
Thanks
You need to explicitly define a width on the element when using margin: 0 auto to center.
Block elements take up the full available viewport width unless you explicitly give them a width.
Since you explicitly set the width of the slider DIV, you can use another trick to center it:
#slider
{
z-index: 2;
background-image: url(../img/sliderbg_09_09.png);
position: absolute;
display: block;
width: 982px;
height: 251px;
left: 50%;
margin-left: -491px; /** half DIV width */
}
I'd probably steer away from having this as a position absolute DIV, doesn't look like it needs it but that's a quick and dirty centering :)
Hope that helps
If you must use absolute positioning, you can use something like my answer here.
Basically, you declare an explicit width for your element, then give it
left: 50%;
margin-left: -[your width/2];
like user showdev mentioned :
Does it need to be positioned absolutely? Does it even need to be centered? It looks like you've positioned div#navBar simply by adding margin-left: 85px. It seems that you could use that same method for div#slider.
you have
#navBar {
background-image: url("../img/navbg_07.png");
display: block;
height: 38px;
margin-left: 85px; /* attention on this */
margin-top: 31px;
position: relative;
width: 879px;
z-index: 1;
}
and this
#slider {
background-image: url("../img/sliderbg_09_09.png");
display: block;
height: 251px;
position: absolute;
width: 982px;
z-index: 2;
}
so, try 'margin-left: 85px;' your #slider.
I have a simple question, and want to know if you can solve it for me..
Anyway, the question is, how do i place a box in the right side of the page, that wont affect any of the appearence of the css that is currently on the page :)
Use position: absolute;. To define the position, you can use the top, left, right, bottom properties to specify the respective offsets. In your case, you probably want right:
.rightbar {
position: absolute;
top: 0px; /*how many pixels from top*/
right: 25px; /*how many pixels from right*/
width: 50px;
height: 150px;
}
If you want your div to stay visible even after you scroll, use position: fixed;.
Little demo: little link.
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/
I have a form I would like to center directly in the middle of a page. I have this CSS
#form {
width: 240px;
height: 100px
margin: 0 auto;
display: block;
}
this only does it horizontally. Is there a way to do it vertically?
I might be wrong but if I remember correctly.. this should work:
#form {
width: 240px;
height: 100px
position: absolute; /* make sure this is wrapped by an element with "position: relative" */
top: 50%;
left: 50%;
margin: -50px 0 0 -120px; /* half of the height and width */
}
If I'm wrong, then you probably have to use javascript.
Not really - you can declare an offset from the top of the page, but think about it for a moment...how tall is a webpage? What does it mean to be centered vertically?
Do you want to be centered relative to the open browser window height? Or centered relative to the height of the page (top of header to bottom of footer, regardless of browser window size).
On preview, the comments on the original post cover this well.