Welcome to the forum 👋, Visitor
To access the forum content and all our services, you must register or log in to the forum. Becoming a member of the forum is completely free.
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!
<html>
<head>
<style type="text/css">
.image { padding-top:50%;}
</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>
Am I doing something wrong?
<head>
<style type="text/css">
.image { padding-top:50%;}
</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>
Am I doing something wrong?
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.
Why don't you get rid of the <center> tag and like Melvin said use "#image { padding-top:50%;}" use "#image { padding-left:50% }" as this will most likely work. Plus ID's use "#" not "." so that could be a problem with your previous code you posted.
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!
HTML:
<div id="container" style="height:500px;background:url(http://www.rossmoyne.wa.edu.au/Portals/0/docs/Community/Alumni/Facebook-Icon.jpg) no-repeat 0 50%"></div>Use the image as a background one, then set the div's height to the appropriate one.
Code:
<html>
<head>
<style type="text/css">
#image { padding-top:25%; 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>that should work
Which code are you using? Mine or Melvin's?
That will only center the image horizontally...