Search code examples
cssopera

text-align center for opera - css

if Chrome is look like this:

.text-center {
  text-align: -webkit-center;
}

and firefox:

.text-center {
  text-align: -moz-center;
}

how about in opera?

.text-center {
  text-align: -o-center;
}

is not working.

UPDATE:

HTML:

  .container
    .text-center.label-margin
      %h3
        .bubble LEADERSHIP

CSS of my bubble class.

.bubble {
  position: relative;
  width: 170px;
  height: 45px;
  padding: 11px 0 0 0 !important;
  background-color: #333333 !important;
  font-style: normal !important;
  font-family: 'Fira Sans', sans-serif;
  font-size: 25px;
  font-weight: 600;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
}

it looks like in OPeraenter image description here

Solution

  • You do not need to prefix the text-align property. You can simply use:

    text-align:center;

    instead (which should work on all browsers).

    Further Reading:

    • W3.org documentation on the text-align property.
    • Here's quite a nice CSS-Tricks article that you might find useful.
    • If we're talking about any property, caniuse... is one of the 'best' browser compatibility websites out there, with info on nearly all css properties.

    Please also note: Border-radius does not require prefixing (and hasn't done for quite some time now), whilst using !important is considered bad practise, so I would personally advise to get out of the habit of using it.