List formatting in HTML-CodePudding

(I don't really understand how to post the code here - sorry)

I am a beginner in HTML and StackOverflow. Today is my first time using StackOverflow. I had a question about formatting my lists in HTML. I want to have 2 lists be next to each other but in the center of the screen. I have 2 lists side-by-side but can't figure out a way to get it into the center. Help would be greatly appreciated.

<div >
    <ul style="font-size: 125%; font-family: 'Courier New', Courier, monospace; font-weight: bold; ">
      <li>Sterling Silver Jewelry</li>
      <li>Copper Jewelry</li>
      <li>Beaded Jewelry</li>
      <li>Bone Jewelry</li>
      <li>Home Furnishings</li>
      <li>Flutes</li>
      <li>Music</li>
      <li>Books</li>
      <li>Pendleton Items</li>
  </ul>

  <ul style="font-size: 125%; font-family: 'Courier New', Courier, monospace; font-weight: bold;">
      <li>Lamps</li>
      <li>Rugs/Placemats</li>
      <li>T-Shirts</li>
      <li>Candle Holders</li>
      <li>Teas</li>
      <li>Soaps</li>
      <li>Balms</li>
      <li>And much more</li>
    </ul>
</div>

CodePudding user response：

You're 90% there; you just need to use justify-content to position the contents of your flex container along the horizontal-axis. align-items is for positioning on the vertical-axis (note: both of these rules are reversed if you switch your flex-direction to column, btw).

.listContainer {
  display: flex;
  justify-content: center;
}

<div >
  <ul>
    <li>Sterling Silver Jewelry</li>
    <li>Copper Jewelry</li>
    <li>Beaded Jewelry</li>
    <li>Bone Jewelry</li>
    <li>Home Furnishings</li>
    <li>Flutes</li>
    <li>Music</li>
    <li>Books</li>
    <li>Pendleton Items</li>
  </ul>
  <ul>
    <li>Lamps</li>
    <li>Rugs/Placemats</li>
    <li> T-Shirts</li>
    <li>Candle</li>
    <li>Holders</li>
    <li>Teas</li>
    <li>Soaps</li>
    <li>Balms</li>
    <li>And much more</li>

  </ul>
</div>

I'd recommend reading up a little more on flexbox to get your confidence up when using it -- it has a lot of useful properties!

CodePudding user response：

Try placing them in a 2 column grid, such as the following:

<div >
  <div>
    <b>List 1:</b><br />
    <ul>
      <li>Item 1a</li>
      <li>Item 1b</li>
    </ul>
  </div>
  <div >
    <b>List 2:</b><br />
    <ul>
      <li>Item 2a</li>
      <li>Item 2b</li>
    </ul>
  </div>
</div>

With the following css:

.container {
  display: grid;
  grid-template-columns: auto auto;
}

.container > div {
  border: 2px solid blue;
}

You can see this in action with this JSFiddle is here: JSFiddle