sathish Posted November 17, 2005 Share Posted November 17, 2005 Hello Everyone!I am trying to fine tune myself in CSS. Could someone please take a look at this http://www.snailinteractive.com/Untitled-2.gifand tell me how I could center stuffs like this depending on the screen resolution using CSS. I prefer the code and little bit of explanation.Thank You all,Sathish Link to comment Share on other sites More sharing options...
Mimika Posted November 17, 2005 Share Posted November 17, 2005 iam no expert just started 4 weeks ago but i can some basic'sI use Coldfusion MXif i understand this right then its just text that you want centerd both horosontal and verticaladd this content inside the [name].css file .text { text-align: center; vertical-align: middle;} if you dont use class then delete the .text, I use it allot and i love it :)classes can be used in most tags but are not valid in all browsers just addclass="[name]" inside a tag so in this case it should be class="text"hope this will help if not then someone else will help Link to comment Share on other sites More sharing options...
F-Man Posted November 17, 2005 Share Posted November 17, 2005 Also make sure to specify that <html /> and <body /> should be 100% in height. html, body { height: 100%;} Link to comment Share on other sites More sharing options...
Paim Posted November 18, 2005 Share Posted November 18, 2005 <html />? <html> and <body> have closing tags Link to comment Share on other sites More sharing options...
F-Man Posted November 18, 2005 Share Posted November 18, 2005 <html />? <html> and <body> have closing tags <{POST_SNAPBACK}> They were empty in my post, hence the self-closing. (XML > HTML) Link to comment Share on other sites More sharing options...
sathish Posted November 18, 2005 Author Share Posted November 18, 2005 Ok, now could some one tell me how I can center both vertically and horizontally a website. I know how to do it using the TABLE concept in HTML, but how to do it in CSS.Sathish Link to comment Share on other sites More sharing options...
F-Man Posted November 18, 2005 Share Posted November 18, 2005 (edited) After some testing... p { text-align: center; margin: 50% 0;} Sorry for my previous post, I was wrong.EDIT: ok, that just doesn't work properly at all, it seemed to at first... Anyway, I don't know now. I woulda thunk vertical-align would be the way to go but it didn't work. Edited November 18, 2005 by F-Man Link to comment Share on other sites More sharing options...
holmedwa04 Posted November 16, 2008 Share Posted November 16, 2008 Try using this, my knowledge of CSS is limited but this has worked for me before: p {margin: auto;} This would do it for something in a paragraph but can be done for anything from divs to images etc. Link to comment Share on other sites More sharing options...
Ingolme Posted November 16, 2008 Share Posted November 16, 2008 Centering vertically is very hard.You can do it with absolute positioning, but your elements will be required to have a defined height.First you have to give the parent element a fixed height. If you want it centered in the whole window, you'll have to use 100% for the html and body elements: html,body { height: 100%; } After that, you have to give your element a fixed height: .myElement {height: 10em;} Then you have to position it absolutely and move it 50% from the top: html,body { height: 100%; }.myElement {height: 10em;position: absolute;top: 50%;} This leaves your element halfway down from the top of the document. Now you have to use a negative margin to move the element back up. You'll move it half of its height: html,body { height: 100%; }.myElement {height: 10em;position: absolute;top: 50%;margin-top: -5em;} Now your element will be centered compared to the window.If you want it centered compared to an element rather than the full window, be sure to make the parent element have a relative position: .parentElement {position: relative;height: 400px;}.myElement {height: 10em;position: absolute;top: 50%;margin-top: -5em;} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now