Div align=center not working in firefox

HTML & CSS
1

I am trying to center a table (horizantly) inside div tag using <div align=“center”>. But the table always is left aligned. This happens only in firefox. Internet explorer centers the table very well. How to center the table in firefox.

regards,
nirvan.

2

Not the way to go. Better to give the div a width and auto left and right margins. E.g.


div.table {
  margin: 0 auto;
  width: 400px; /* set width to suit */
}
3

Thanks very much for the reply. That worked. But I have another question. How do I center the table vertically too both in IE and firefox.

regards,
nirvan

4

Ah, vertical centering is another kettle of fish. You need to be clearer on what your circumstances are. Normally the div would just wrap around the table. The easiest way to vertically center a table in a div is to have the same padding on the top and bottom of the container div. Is that what you mean? CSS does not have much support for vertical centering, except with images, table cells and maybe a few other elements.

If that’s not what you mean, explain a bit more. If you mean vertically centering the table and div in the browser window, it’s a bit tricky.

5

Here is what I have. There is a table inside div tag. Within the table are two submit buttons. I wan’t to position the buttons in the center of div horizantly as well as vertically. I think that if I center the table in div, the buttons will automatically be centered. But I don’t how to center table vertically in div.

regards,
nirvan.

6

Centering the table vertically in the div does not make sense. The div will be the same height as the table. It sounds like you want to vertically center the submit buttons inside the table. You could try


td {vertical-align: middle}
7

td {vertical-align: middle} does not work. Here is the actual code.That should give you a clear picture.


      <div id="footer">
          <h:panelGrid columns="2" styleClass="panelGrid">
              <h:commandButton value="Fetch" action="#{branchBean.inquireBranch}" 
              				styleClass="barButton" onclick="return validateForm();"/>
              <h:commandButton type="reset" value="Reset" styleClass="barButton"/>
          </h:panelGrid>
      </div>

The div is positioned at the bottom. “h:panelGrid” is server side component that generates the html table. “h:commandButton” is also server side component that generates html submit or reset buttons. I want to position the two buttons represented by “h:commandButton” at the center of the div horizantly and vertically.

regards,
nirvan.

8

I think you need to show us the actual HTML that is served to the browser inside the div.

9

Here is what comes to the browser.


<div id="footer">
	<table class="panelGrid">
		<tbody>
			<tr>
				<td><input type="submit" name="brchForm:j_id_jsp_1700364392_28" value="Fetch" onclick="return 					validateForm();" class="barButton" />
				</td>
				<td><input type="reset" name="brchForm:j_id_jsp_1700364392_29" value="Reset" class="barButton" />
				</td>
			</tr>
		</tbody>
	</table>
</div>

The footer is fixed at the bottom of the page. Currently I am using “margin-top:12px;” to position the buttons at the middle of the footer vertically. This doesn’t seem to be a good technique, as the size of footer my change in future.

regards,
nirvan.

10

Perhaps give us your current css too, as without the css, the footer is only as tall as the buttons, in which case vertical alignment has no meaning.

I presume you don’t mean that you want the buttons one on top of the other?

11

Here is the code for the footer div and table and button.


#footer {
    width:100%;
    height:50px;
    position:absolute;
    left:0;
    bottom:-1px;
    overflow:auto;
    background:#77F;
    border-top:1px solid #000;
    text-align:center;
}

.panelGrid {
	text-align:left;
	margin: 0 auto;
}

.barButton {
	width:75px;
	margin-top:12px;
}

I just want the buttons side by side in the middle and not overlapping.

regards,
nirvan

12

OK, now I get you.

I’ve removed the 12px margin and added in a few td styles. That will do it. :slight_smile:


#footer {
    width:100%;
    height:50px;
    position:absolute;
    left:0;
    bottom:-1px;
    overflow:auto;
    background:#77F;
    border-top:1px solid #000;
    text-align:center;
}

.panelGrid {
	text-align:left;
	margin: 0 auto;
}

[COLOR="Blue"].barButton {
	width:75px;
}[/COLOR]

[COLOR="Red"]td {
    vertical-align: middle;
    height: 50px;
}[/COLOR]
13

Thanks very much. Now I have the buttons in middle. Vertical align is working now.

regards,
nirvan.

14

Hello. Are you sure that this works in Internet explorer? I have a very similar problem and your fix worked in firefox but then went and did the opposite to IE8!

Regards,

15

Hello. Are you sure that this works in Internet explorer? I have a very similar problem and your fix worked in firefox but then went and did the opposite to IE8!

Do you have a valid doctype? If not ie8 will behave more like ie5 and loses the ability to understand all but the most basic of css :slight_smile: In quirks mode auto centering is not understood by IE and it would need text-align:center on a parent instead.

16

Thank you Paul. Did not have a valid doctype. By using <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> it sorted the problem out for me.

Regards.

17

Glad that sorted it :slight_smile:

You will now be able to use any of the newer css features that IE8 supports (display:table etc).