Search code examples
cssindentationtext-align

CSS: Ignore Indent on Center aligned text


Just started posting stories and essays online and I've found a couple sites that have very basic text editors that don't allow a lot of basic formatting unless you apply a CSS Workskin. After searching through the topics here I found some useful Code but ran into some problems. What I want to know is if there's a way to set Center Aligned text to ignore Indentation without setting it to a specific Class?

#workskin p {
  text-indent: 45px;
}

I have the above set to indent the first line of every paragraph but it also indents everything that's centered which skews it off-center. I hope there's some adjustment to the above code that forces it to ignore center aligned text.

#workskin p.chapter {
  text-align:center;
  text-indent:0;
}

I learned how to set a Class as above to correct this but some of the postings I'll be making will require hundreds or thousands of center-aligned lines so I'm really hoping I can do it with some Code rather than having to manually set them to a Class. Thanks for any help you can give!

EDIT: To specify what I'm asking for, I want to force all center aligned text to have 0 indent so I don't have to manually insert:

<p class="chapter">

Thousands of times.

Paragraph --- want Indent
Paragraph --- want Indent
Centered text/divider/chapter title/ect... ---- do NOT want Indent
Paragraph --- want Indent
Centered text/divider/chapter title/ect... ---- do NOT want Indent
pattern continues randomly


Solution

  • Just do something like:

     #workskin p.chapter {
          display: block;
          text-align:center;
          text-indent:0!important;
         /* "!imporatnt" ensures that it overrides
         previous indent property set, if the value 0 
         and specification doesn't solve the problem */
        }
    

    To indent just the first paragraph do something like below, none of the other paragraphs will not indent.

    #workskin p:first-of-type { /* Targets just the first paragraph */
         text-indent: 45px;
    }