样式列表项分为两列居中

Question

我正在尝试设置存储在无序列表中的歌词的样式。每行歌词都包含在一个单独的列表项中。我需要这些歌词以和居中的两栏格式显示。下面的代码是我得到的最接近的代码，但我仍然没有找到使文本居中的可行解决方案。任何帮助将不胜感激！

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>

我想这可能就是您想要的。基本上，您可以使用 display: inline 而不是 float 并使用 to force line breaks where you want them. Credit goes to 中的一个特定技巧来实现 display 想法，尽管 inline-block 并没有像以及 inline.

Answer 2

您可以使用 bootstrap 执行此操作。但这也行。

.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

我不太确定你需要什么，但我相信你需要这样的东西。

我使用了网格而不是 flexbox。这也可以使用 flexbox 来完成，我相信 CSS 样式表不必要地变得太复杂了。

/* 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 */
}

样式列表项分为两列居中

Style List Items Into Two Columns Centered

html

css

html-lists

flexbox