HTML Forums | An HTML and CSS Coding Community
Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!
Center Div
- Thread starter fermlour
- Start date
If I'm not mistaken, the easiest method is defining the div's line-height attribute through CSS. That way, the line of text will be vertically centered automatically. For instance:
That only works for 1 line of text though. If you need to vertically center images or a paragraph, this may help: http://www.vanseodesign.com/css/vertical-centering/
Hope that helps!
HTML:
<div style="line-height:100px">
Text
</div>That only works for 1 line of text though. If you need to vertically center images or a paragraph, this may help: http://www.vanseodesign.com/css/vertical-centering/
Hope that helps!
No. like so:
<html>
<head>
<style type="text/css">
#image { padding-top: 10%;}
</style>
</head>
<body>
<center>
<div id="image"><img src="http://www.rossmoyne.wa.edu.au/Portals/0/docs/Community/Alumni/Facebook-Icon.jpg" /></div>
</center>
</body>
</html>
Play around with the percentages for the padding until you get the desired results.
<html>
<head>
<style type="text/css">
#image { padding-top: 10%;}
</style>
</head>
<body>
<center>
<div id="image"><img src="http://www.rossmoyne.wa.edu.au/Portals/0/docs/Community/Alumni/Facebook-Icon.jpg" /></div>
</center>
</body>
</html>
Play around with the percentages for the padding until you get the desired results.
Change the .image to #image because id's use the # and classes use the . Then play around with the percentage until you get the desired results.
I can not yet, is not centered.
I am using the code:
<html>
<head>
<style type="text/css">
#image { padding-top:50%;}
#image { padding-left:50% }
</style>
</head>
<body>
<div id=image><img src="http://www.rossmoyne.wa.edu.au/Portals/0/docs/Community/Alumni/Facebook-Icon.jpg" /></div>
</body>
</html>
thank you!
Which code are you using? Mine or Melvin's?
That will only center the image horizontally...
