css for mozila and css for chrome

Question

I would like to ask about a centering problem i have with a <p> on mozilla and firefox. You know, it looks nice on chrome but not on mozilla.

Here the css I'm trying to tweak:

.center-bottom, -moz-div.center-bottom  {
  align-content: center;
  float: left;
  margin-left: 23%;
  margin-top: -6px;
}

Here it is on chrome:
http://imagizer.imageshack.us/v2/1024x768q90/546/725z.jpg

On firefox:
http://imageshack.com/a/img855/5242/ya5y.jpg

The first line inside the stroked line is a javascript printing the line. And I want to center that together with the second line on both mozilla and chrome and IE.

From my research I saw about -moz-,-webkit-, and top,left etc (the old margins) but I can't seem to make them work!

Answer 1

I think you should try to make it work with standard css at first rather than applying browser specific styles. For me it looks like using simple text-align: center should do the work. But its impossible to tell you exactly since you do not provide real code.

.center-bottom {
  text-align: center;
  margin: auto;
}

fiddle