When to use margin:auto or text-align:center for centering?

  • Kurthead+1
  • Graduate
  • Graduate
  • Kurthead+1
  • Posts: 131

Post 3+ Months Ago

When does margin:auto; work? And when does text-align:center work? Sometimes these seem to work and sometimes they don't, and I'm not sure why. Sometimes with pictures, sometimes div's different things, I can't find a causal link. My most recent code that it wouldn't work in, is 3 inline images in a div. one image is to the left of the div; one is supposed to be in the center; and the last is supposed to be to the right. For the right one, I tried margin-right:0; but that didn't work, so I used float:right; instead. So the right image is floated. The left image isn't messed with. And I have to use a specific margin to center the middle image which I had to figure with a pixel ruler. Why wouldn't it just center?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1244
  • Loc: Sydney

Post 3+ Months Ago

post the code that is not working
  • Kurthead+1
  • Graduate
  • Graduate
  • Kurthead+1
  • Posts: 131

Post 3+ Months Ago

Okay. The css is a separate file, so I'll post it first, then I'll post one of the 8 files it is linked to. All 8 files have the same code with different picture links.
This is the external .css file.
(and by the way the page works the way I need it to, just using a margin-left:118px, instead of margin:auto. I just need to know why margin:auto doesn't work for educational purposes.)
(also the margin:auto in #center id works, so that one is not the problem, it is the one in #house //on line 53 of the code\\ id that wouldn't work.)

CSS Code: [ Select ]
img
{
border:7px double #286898;
background-color: #882800;
}
 
a:hover img
{
border:7px double #882800;
background-color:#286898;
}
 
body
{
background-color:#AAAAAA;
}
 
#center
{
margin:auto;
margin-top:30px;
width:530px;
}
 
 
div.navbar
{
margin:auto;
width:450px;
position:relative;
right:4px;
clear:both;
 
}
 
.navbar img
{
opacity:.6;
filter:alpha(opacity=60);
border:none;
}
 
.navbar a:hover img
{
opacity:1;
filter:alpha(opacity=100);
border:none;
}
 
#house
{
position:absolute;
margin:auto;
margin-top:14px;
}
 
.navbar img
{
border:none;
}
 
#navright
{
position:relative;
margin-top:18px;
float:right;
}
 
#navleft
{
position:relative;
margin-top:14px;
}
 
  1. img
  2. {
  3. border:7px double #286898;
  4. background-color: #882800;
  5. }
  6.  
  7. a:hover img
  8. {
  9. border:7px double #882800;
  10. background-color:#286898;
  11. }
  12.  
  13. body
  14. {
  15. background-color:#AAAAAA;
  16. }
  17.  
  18. #center
  19. {
  20. margin:auto;
  21. margin-top:30px;
  22. width:530px;
  23. }
  24.  
  25.  
  26. div.navbar
  27. {
  28. margin:auto;
  29. width:450px;
  30. position:relative;
  31. right:4px;
  32. clear:both;
  33.  
  34. }
  35.  
  36. .navbar img
  37. {
  38. opacity:.6;
  39. filter:alpha(opacity=60);
  40. border:none;
  41. }
  42.  
  43. .navbar a:hover img
  44. {
  45. opacity:1;
  46. filter:alpha(opacity=100);
  47. border:none;
  48. }
  49.  
  50. #house
  51. {
  52. position:absolute;
  53. margin:auto;
  54. margin-top:14px;
  55. }
  56.  
  57. .navbar img
  58. {
  59. border:none;
  60. }
  61.  
  62. #navright
  63. {
  64. position:relative;
  65. margin-top:18px;
  66. float:right;
  67. }
  68.  
  69. #navleft
  70. {
  71. position:relative;
  72. margin-top:14px;
  73. }
  74.  



//!This is one of the .html files that it is linked to//

HTML Code: [ Select ]
<!DOCTYPE html>
<html>
<head>
<title>Black Hole</title>
<link rel="icon"
     type="jpg/png"
     href="bob.jpg">
 
<link rel="stylesheet" type="text/css" href="galaxy_gallery.css">
</head>
 
<body>
 
<div id="center">
<a href="galleries.html" target="_parent"><img src="black_hole_big.png"></a>
</div>
<div class="navbar">
<a href="spitzer.html" target="_parent"><img id="navleft" src="left_arrow.png"></a>
<a href="galleries.html" target="_parent"><img id="house" src="house.png"></a>
<a href="explosion.html" target="_parent"><img id="navright" src="right_arrow.png"></a>
</div>
 
</body>
 
</html>
 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Black Hole</title>
  5. <link rel="icon"
  6.      type="jpg/png"
  7.      href="bob.jpg">
  8.  
  9. <link rel="stylesheet" type="text/css" href="galaxy_gallery.css">
  10. </head>
  11.  
  12. <body>
  13.  
  14. <div id="center">
  15. <a href="galleries.html" target="_parent"><img src="black_hole_big.png"></a>
  16. </div>
  17. <div class="navbar">
  18. <a href="spitzer.html" target="_parent"><img id="navleft" src="left_arrow.png"></a>
  19. <a href="galleries.html" target="_parent"><img id="house" src="house.png"></a>
  20. <a href="explosion.html" target="_parent"><img id="navright" src="right_arrow.png"></a>
  21. </div>
  22.  
  23. </body>
  24.  
  25. </html>
  26.  
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 475

Post 3+ Months Ago

If I'm doing some sort of positioning like you are doing I tend to keep CSS things simple on the the images and wrap the images in div tags.

Quote:
When does margin:auto; work? And when does text-align:center work? Sometimes these seem to work and sometimes they don't, and I'm not sure why.


The difference has to do with the block and inline elements. block elements have dimensions and you need to set the width before the margins will work. inline block elements and most replaced elements like images and buttons can also have a width applied but will not center with auto margins.

To center a block element just give it a width and then use margin:0 auto or just margin:auto

For inline elements (and inline-block elements) you can just text-align:center on the parent and the text will be centered. though this works in most cases I've always had issues with images. you could turn the image into a block element but I still find it doesn't work as expected. So I do something like the code below.

HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
 
img
{
border:7px double #286898;
background-color: #882800;
}
 
a:hover img
{
border:7px double #882800;
background-color:#286898;
}
 
body
{
background-color:#AAAAAA;
}
 
#center
{
margin:auto;
margin-top:30px;
width:530px;
}
 
 
div.navbar
{
margin:auto;
width:450px;
clear:both;
background-color:#3FF
}
 
.navbar img
{
opacity:.6;
filter:alpha(opacity=60);
border:none;
}
 
.navbar a:hover img
{
opacity:1;
filter:alpha(opacity=100);
border:none;
}
 
.navbar img
{
border:none;
}
 
#left-container {
   width: 16px;
   height:16px;
   float:left;
   margin-top:4px;
}
 
 
#center-container {
   width: 85px;
   height:22px;
   margin:auto;
   margin-top:14px;
}
 
#right-container {
   width: 16px;
   height:16px;
   float:right;
   margin-top:4px;
}
 
div.clear-both {
   clear:both;
}
</style>
</head>
 
<body>
 
<div id="center">
<a href="galleries.html" target="_parent"><img src="black_hole.jpg"></a>
</div>
<div class="navbar">
    <div id="left-container">
        <a href="spitzer.html" target="_parent"><img src="left_arrow.jpg"></a>
    </div>
    <div id="right-container">
      <a href="explosion.html" target="_parent"><img src="right_arrow.jpg"></a>
    </div>
    <div id="center-container">
      <a href="galleries.html" target="_parent"><img src="house.jpg"></a>
    </div>
</div>
 
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style>
  7.  
  8. img
  9. {
  10. border:7px double #286898;
  11. background-color: #882800;
  12. }
  13.  
  14. a:hover img
  15. {
  16. border:7px double #882800;
  17. background-color:#286898;
  18. }
  19.  
  20. body
  21. {
  22. background-color:#AAAAAA;
  23. }
  24.  
  25. #center
  26. {
  27. margin:auto;
  28. margin-top:30px;
  29. width:530px;
  30. }
  31.  
  32.  
  33. div.navbar
  34. {
  35. margin:auto;
  36. width:450px;
  37. clear:both;
  38. background-color:#3FF
  39. }
  40.  
  41. .navbar img
  42. {
  43. opacity:.6;
  44. filter:alpha(opacity=60);
  45. border:none;
  46. }
  47.  
  48. .navbar a:hover img
  49. {
  50. opacity:1;
  51. filter:alpha(opacity=100);
  52. border:none;
  53. }
  54.  
  55. .navbar img
  56. {
  57. border:none;
  58. }
  59.  
  60. #left-container {
  61.    width: 16px;
  62.    height:16px;
  63.    float:left;
  64.    margin-top:4px;
  65. }
  66.  
  67.  
  68. #center-container {
  69.    width: 85px;
  70.    height:22px;
  71.    margin:auto;
  72.    margin-top:14px;
  73. }
  74.  
  75. #right-container {
  76.    width: 16px;
  77.    height:16px;
  78.    float:right;
  79.    margin-top:4px;
  80. }
  81.  
  82. div.clear-both {
  83.    clear:both;
  84. }
  85. </style>
  86. </head>
  87.  
  88. <body>
  89.  
  90. <div id="center">
  91. <a href="galleries.html" target="_parent"><img src="black_hole.jpg"></a>
  92. </div>
  93. <div class="navbar">
  94.     <div id="left-container">
  95.         <a href="spitzer.html" target="_parent"><img src="left_arrow.jpg"></a>
  96.     </div>
  97.     <div id="right-container">
  98.       <a href="explosion.html" target="_parent"><img src="right_arrow.jpg"></a>
  99.     </div>
  100.     <div id="center-container">
  101.       <a href="galleries.html" target="_parent"><img src="house.jpg"></a>
  102.     </div>
  103. </div>
  104.  
  105. </body>
  106. </html>
  107.  
  • Kurthead+1
  • Graduate
  • Graduate
  • Kurthead+1
  • Posts: 131

Post 3+ Months Ago

Thank you. That did allow it to center, but it posed another problem. It caused the middle "home" icon and the float:right; "Right_Arrow" icon to drop down a line. Which is okay, because this was only for educational purposes and I just needed to know when certain elements centered, so you provided me with the information I needed. I'm sure if I run into that problem in the future that I should be able to solve it on my own. Again thanks very much.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 72 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.