# Firefox centering



## whardman (Jun 28, 2006)

I am trying to center some text in a div using CSS. It works fine in IE but Firefox refuses to center the text. I have tried text-align, and margin auto but nothing seems to work. Other centered text is fine but the section is not. I have asked my college professor and he is stumped as well. Does anyone have any ideas?


```
<div id="mainbody">
<h1 class="title">Screenshots</h1>
<div class="screenshotthumb">
  <a href="viewscreenshot.php?image=img.jpg">
    <img src="screenshots/Thumbnails/img.jpg" width="300" height="180" alt="Alt text" />
  </a>
  <br/>
  <div class="imgdescthumb">Description of the Image</div>
  <p class="imgcreatorthumb">By Gen. Wesley</p>
</div>
</div>
```


```
#mainbody {
	padding: 0 2em 2em 0;
	border-style: solid;
	border-width: 0px;
	float: left;
	clear: none;
}
.screenshotthumb {
	display: inline;
	float: left;
	text-align: center;
	padding: .5em;
	margin: .5em;
	border-width: 1px;
	border-style: solid;
	border-color: #FFAA00;
}

.imgdescthumb {
	font-size: 1.3em;
	font-weight: bold;
	color: #FFFFFF;
}

.imgcreatorthumb {
	font-size: 1.1em;
	color: #CC0000;
}
```
This is the site -> http://usarmy.wesleyhardman.net/screenshots.php


----------



## v-six (Sep 12, 2004)

which part are you trying to center?


----------



## KoosHopeloos (Nov 3, 2004)

@ whardman: 

You have several options, although I'm not sure if this can be implemented in CSS... I think you can not do this without CSS.

Edit: It seems that IE is not behaving correctly and Firefox is. You need to add "margin:auto" in the second div (in blue)

<div id="mainbody" *align="center"* (for complete centering including image)>
<h1 class="title">Screenshots</h1>
<div class="screenshotthumb">
<a href="viewscreenshot.php?image=img.jpg">
<img src="screenshots/Thumbnails/img.jpg" width="300" height="180" alt="Alt text" />
</a>
<br/>
<div class="imgdescthumb" *align="center"* (centering of text only)>Description of the Image</div>
<p class="imgcreatorthumb" *align="center"* (centering of text only)>By Gen. Wesley</p>
</div>
</div>

OR

#mainbody {
padding: 0 2em 2em 0;
border-style: solid;
border-width: 0px;
float: left;
clear: none;
}
.screenshotthumb {
display: inline;
float: left;
text-align: center;
padding: .5em;
margin: .5em;
border-width: 1px;
border-style: solid;
border-color: #FFAA00;
}

.imgdescthumb {
font-size: 1.3em;
font-weight: bold;
color: #FFFFFF;
*margin: auto;*
}

.imgcreatorthumb {
font-size: 1.1em;
color: #CC0000;
*margin: auto;*
}

Links for you and your professor
- http://archivist.incutio.com/viewlist/css-discuss/62780
- http://forums.digitalpoint.com/showthread.php?t=26296
- http://www.siteexperts.com/forums/viewConverse.asp?d_id=19449


----------



## whardman (Jun 28, 2006)

Tried that already and it still isn't working. As I said, I have tried "margin: auto", "margin: 0 auto", "margin-left: auto; margin-right:auto", "text-align: center", and even "text-align: -moz-center", yet nothing will center the text.

EDIT: I found that Firefox will ONLY center the text when there is no image. If I take the image out, firefox will center the image but not when the image is put back in. Any idea as to why this is and any workaround??


```
.screenshotthumb {
	display: inline;
	float: left;
	text-align: center;
	padding: .5em;
	margin: .5em;
	border-width: 1px;
	border-style: solid;
	border-color: #FFAA00;
}

.imgdescthumb {
	font-size: 1.3em;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	margin: auto;
}

.imgcreatorthumb {
	font-size: 1.1em;
	color: #CC0000;
	text-align: center;
	margin: auto;
}
```


----------



## whardman (Jun 28, 2006)

Update: Firefox 2.0 will NOT display it correctly (even the margin: auto). Firefox 3, however, will. It seems to be a bug when using images.

I did find a fix, however, quite by accident when trying to fix another "bug" with firefox. If I float a div to the left then float another div, the second div will expand to a width of the entire window not just the width of the remaining part of the window. To fix THIS problem I have a script to fix the width at the size of the rest of the window. When I do this it fixes the centering bug. Why, I don't know, but it does.


----------

