Style List Items Into Two Columns Centered

Question

I'm trying to style song lyrics that are stored in an unordered list. Each lyric line is contained in a separate list item. I need these lyrics to be displayed in a two-column format and centered. The code below is the closest that I've gotten but I still have not found a viable solution for centering the text. Any help would be greatly appreciated!

h3 {
  clear: both;
  padding-top: 20px;
}

.phrases.floated {
    margin-left: auto;
    margin-right: auto;
    background-color: #ccc; /* For demo purposes */
    
    width: 600px;
}

.phrases.floated li {
    list-style-type: none;
    float: left;
}

.phrases.floated li:nth-of-type(2n+1) {
    background-color: beige; /* For demo purposes */
    clear: both;
    margin-right: 20px;
}


/* Flexbox  */
.phrases.flexbox {
    display: flex;
    flex-flow: row wrap;
    background-color: #ccc; /* For demo purposes */
    
    width: 600px;
    
}

.phrases.flexbox li {
    list-style-type: none;
    flex-basis: calc( 50% - 10px);
    text-align: left;
}

.phrases.flexbox li:nth-of-type(2n+1) {
    background-color: beige; /* For demo purposes */
    text-align: right;
    margin-right: 10px;
}

    <h3>Phrases Floated</h3>
    <ul class="phrases floated">
      <li>O beautiful for spacious skies</li>
      <li>For amber waves of grain</li>
      <li>For purple mountain majesties</li>
      <li>Above the fruited plain!</li>
      <li>America! America</li>
      <li>God shed His grace on thee</li>
      <li>And crown thy good with brotherhood</li>
      <li>From sea to shining sea!</li>
    </ul>

    <h3>Phrases Flexbox</h3>
    <ul class="phrases flexbox">
      <li>O beautiful for spacious skies</li>
      <li>For amber waves of grain</li>
      <li>For purple mountain majesties</li>
      <li>Above the fruited plain!</li>
      <li>America! America</li>
      <li>God shed His grace on thee</li>
      <li>And crown thy good with brotherhood</li>
      <li>From sea to shining sea!</li>
    </ul>

Answer 1

h3 {
  padding-top: 20px;
}

.phrases {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background-color: #ccc; /* For demo purposes */
    width: 650px;
    padding: 0;
}

.phrases li {
    list-style-type: none;
    display: inline;
}

.phrases li:nth-of-type(2n+1) {
    background-color: beige; /* For demo purposes */
}

.phrases li:nth-of-type(2n):after {
    content: "\A";
    white-space: pre; 
}

<h3>Phrases</h3>
<ul class="phrases">
  <li>O beautiful for spacious skies</li>
  <li>For amber waves of grain</li>
  <li>For purple mountain majesties</li>
  <li>Above the fruited plain!</li>
  <li>America! America</li>
  <li>God shed His grace on thee</li>
  <li>And crown thy good with brotherhood</li>
  <li>From sea to shining sea!</li>
</ul>

I think this might be what you want. Basically, you can use display: inline instead of float and use a particular trick from https://stackoverflow.com/a/4609491/5732397 to force line breaks where you want them. Credit goes to https://stackoverflow.com/a/4767993/5732397 for the display idea, though inline-block didn't end up working as well as inline.

Answer 2

You can do this with bootstrap. But this will also work.

.phrases {
  list-style-type: none;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.col-lg {
    text-align:center;
    border:1px solid black;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

    <ul class="phrases">
      <div class="row">
          <div class="col-lg">
            <li>O beautiful for spacious skies</li>
          </div>
              <div class="col-lg">
            <li>For amber waves of grain</li>
          </div>
      </div>
    </ul>
    
    

Answer 3

I am not really sure what you need but I believe you need something like this.

I have used grid instead of flexbox. This can be done using flexbox also and I believe CSS stylesheet is made too much complicated unnecessarily.

/* Grid  */
.phrases.flexbox {
  display: grid;
  grid-template-columns: 50% 50%;
  background-color: #ccc; /* For demo purposes */
  width: 800px;
  margin: 0px;
  padding: 0px;
}

.phrases.flexbox li {
  list-style-type: none;
  text-align: center;
  padding: 0.2rem 1rem;
}

.phrases.flexbox li:nth-of-type(2n + 1) {
  background-color: beige; /* For demo purposes */
}