Ignore list indentation while centering an item
I've got a thousands of pages worth of HTML that I can't feasibly alter,
so this fix needs to be CSS or js based. I've got .special p tags that are
sometimes inside lists (usually not), I need them to center based on page
width and ignore the list indentation.
Example:
<style>
.special{
font-weight:bold;
text-align:center;
}
</style>
<body>
Here comes a list!
<ol>
<li>Blah</li>
<p class="special">Incorrect</p>
<ul>
<li>Blah</li>
<p class="special">Incorrect</p>
</ul>
</ol>
<p class="special">Correct</p>
<ol start="2">
<li>Blah</li>
</ol>
</body>
See demo at: http://jsfiddle.net/xa3sT/1/
The first .special element is inside a list, so it's tabbed in. The third
is outside, so it centers correctly. I've tried a number of solutions to
render the former as the latter, but they were all for li elements and/or
required special css rules for the parent list element. The LI only fixes
didn't work for the p tag, and I'm hesitant to use the global ul,ol
solutions because these are odd-ball cases and I don't want to risk
altering the appearance of the broad variety of lists in these documents.
Further, as you probably noticed the second element is inside a list
nested within the first. I've seen examples of this too, so the size of
the indent is going to inconsistent. This makes setting a negative
text-indent won't work either.
I can always do something like this:
.special{
font-weight:bold;
text-align:center;
}
ul .special, ol .special{
text-indent:-2.5em;
}
ul ul .special, ol ul .special, ul ol .special, ol ol .special{
text-indent:-5em;
}
ul ul ul .special, ol ul ul .special, ul ol ul .special, ol ol ul .special,
ul ul ol .special, ol ul ol .special, ul ol ol .special, ol ol ol .special{
text-indent:-7.5em;
}
ul ul ul ul .special, ol ul ul ul .special, ul ol ul ul .special, ol ol ul
ul .special,
ul ul ol ul .special, ol ul ol ul .special, ul ol ol ul .special, ol ol ol
ul .special,
ul ul ul ol .special, ol ul ul ol .special, ul ol ul ol .special, ol ol ul
ol .special,
ul ul ol ol .special, ol ul ol ol .special, ul ol ol ol .special, ol ol ol
ol .special{
text-indent:-10em;
}
ul ul ul ul ul .special, ol ul ul ul ul .special, ul ol ul ul ul .special,
ol ol ul ul ul .special,
ul ul ol ul ul .special, ol ul ol ul ul .special, ul ol ol ul ul .special,
ol ol ol ul ul .special,
ul ul ul ol ul .special, ol ul ul ol ul .special, ul ol ul ol ul .special,
ol ol ul ol ul .special,
ul ul ol ol ul .special, ol ul ol ol ul .special, ul ol ol ol ul .special,
ol ol ol ol ul .special,
ul ul ul ul ol .special, ol ul ul ul ol .special, ul ol ul ul ol .special,
ol ol ul ul ol .special,
ul ul ol ul ol .special, ol ul ol ul ol .special, ul ol ol ul ol .special,
ol ol ol ul ol .special,
ul ul ul ol ol .special, ol ul ul ol ol .special, ul ol ul ol ol .special,
ol ol ul ol ol .special,
ul ul ol ol ol .special, ol ul ol ol ol .special, ul ol ol ol ol .special,
ol ol ol ol ol .special{
text-indent:-12.5em;
}
But surely there is a better way to disregard list indentation for a given
element?
No comments:
Post a Comment