CODEWITHSUNDEEP
htmlcss
David
David

Reputation: 409

CSS centered list bullet and numbering

I have an issue with a website I'm making. There are 2 lists inside of boxes all the text seems to be centered with the bullets out on the far left side of the text. I checked this on my local host and no issues were found there. But when I upload it to my web server the issue happens. I would like the text centered but the bullets closer to the text. Attached is the CSS and HTML for the boxes. Also a link to the file with the issue link (It's live but not linked publicly yet)

.centerDivR {
  width: 80%;
  height: 500px;
  margin: 0 auto;
}
.rulesspace {
  width: 4%;
  height: 300px;
  float: left;
}
.news2 {
  width: 46%;
  height: 300px;
  background-color: rgba(192, 192, 192, 0.6);
  float: left;
  padding: 4px;
}
.rulesa {
  width: 46%;
  height: auto;
  float: left;
  padding: 4px;
}
.rulesb {
  width: 46%;
  height: auto;
  float: left;
  padding: 4px;
}
<div style="text-align: center; font size:12pt;"><span class="body"><a href="#">Server Rules</a>||<a href="#">Route Specific Rules</a>
    		||<a href="#">Local Information</a>
    		||<a href="#">Train & Destination Tags</a><br></div></span>
  <hr>
  <div class="centerDivR">
    <div class="rulesa">
      <div style="text-align: center;">
        <span class="h2"><i>General Rules:</i></span>
        <br>
        <br>
      </div>
      <ul>
        <li>No Advertiseing other servers</li>
        <li>Four Strike Policy
          <ol>
            <li>1st Warning</li>
            <li>2nd Warning</li>
            <li>2 Week Ban</li>
            <li>Perminate Suspension</li>
          </ol>
        </li>
        <li>Please keep foul language to a minimum</li>
        <li>Be considerate of other players</li>
        <li>Discussion or distribution of pirated or illegally acquired software is strictly prohibited</li>
      </ul>
    </div>
    <div class="rulesspace"></div>
    <div class="rulesb">
      <div style="text-align: center;">
        <span class="h2"><i>Multiplayer Server Rules:</i></span>
        <br>
        <br>
      </div>
      <ul>
        <li>No spanwing trains with out dispatcher permission</li>
        <li>No flipping switches while DS is on duty with out proper permission</li>
        <li>No passing red signals without G or P plates</li>
        <li>If a signal has stop indication but contains a G or P plate, stop, and ask DS to proceed at restricted speed</li>
        <li>Flipping switches & dropping signals without proper permission while a train is approaching is strictly prohibited.</li>
        <li>Hump Yard tags/settings are not to to be changed except by an Administrator.</li>
        <li>For the UP and BN trackage, call signals LOWER than clear.
          <br>(Clear Varients may be called)</li>
        <li>Obey all Speed limits</li>
        <li>Do not leave mainline switches open</li>
        <li>Special trains (circus trains, OCS trains, etc. may be run only with administrator permission)</li>
        <li>Running a track intended for traffic moving opposite your direction may be run ONLY with track warrant accompanying.</li>
        <li>If you need to leave with other players on the same trackage, you may step away and hold the main for 15 minutes.
          <br>If the limit is reached, your train will be saved and deleted for you to resume later.</li>
      </ul>
      </b>
    </div>
  </div>

Upvotes: 2

Views: 114

Answers (1)

Stickers
Stickers

Reputation: 78676

You might have some mis-matched <div> elements or other markup errors, please valid your HTML and fix them.

If you do set the list items to be center aligned (or inherited from the containers). Try this:

li {
  list-style-position: inside;
}

jsFiddle

body {
  text-align: center;
}
li {
  list-style-position: inside;
}
<ul>
  <li>No Advertiseing other servers</li>
  <li>Four Strike Policy
    <ol>
      <li>1st Warning</li>
      <li>2nd Warning</li>
      <li>2 Week Ban</li>
      <li>Perminate Suspension</li>
    </ol>
  </li>
  <li>Please keep foul language to a minimum</li>
  <li>Be considerate of other players</li>
  <li>Discussion or distribution of pirated or illegally acquired software is strictly prohibited</li>
</ul>

Upvotes: 2

Related Questions