列表项目的HTML / CSS中心标题

Question

我要复制此设计

到目前为止，我仅设法创建了其中一部分。我无法弄清楚如何在信息下方对齐标题，以使标题始终与上方文本居中。例如，当信息较小或较大时，对齐方式将关闭。 任何帮助，将不胜感激。

'using Microsoft.EntityFrameworkCore;'

.list-inline {
    list-style: none;
    padding: 0;
}

.list-inline > li {
    display: inline;
}

/*.list-pipe > li:not(:last-child)::after {
    content: '|';
    margin: 0 .25em;
}*/


.list-pipe > li {
    border-right: 1px solid #00000065;
    margin: 0 .25em;
    padding: 1em 1em 2em 1em;
    font-size: 15px;
    letter-spacing: 0.79px;
    text-align: center;
    color: #11A8A1;

}

.list-inline > li:last-child {
   border-right: none;
}

.list-caption {
    list-style: none;
    padding: 0;
    margin-left: 54px;
}

.list-caption > li {
    display: inline;
    padding-right: 30px;
    font-size: 15px;
    letter-spacing: 0.79px;
    text-align: center;
}

.list-caption > li:first-child {
    display: inline;
    padding-right: 51px;
    font-size: 15px;
    letter-spacing: 0.79px;
    text-align: center;
}

Answer 1

我已经更新了您的html和css代码

请告诉我这是否适合您

ul.list-inline.list-pipe {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
}
ul.list-inline.list-pipe li {
    width: 33%;
    display: inline;
    font-size: 15px;
    letter-spacing: 0.79px;
    text-align: center;
    color: #11A8A1;
    border-left: 1px solid #d0d0d0;
}
ul.list-inline.list-pipe li:first-child {
    border-left: none;
}
ul.list-inline.list-pipe li span {
    display: block;
    margin-top: 10px;
    color: #000;
}

<ul class="list-inline list-pipe" >
  <li>
    Germany
    <span>Place</span>
  </li>
  <li>
    1914-18
    <span>Year</span>
  </li>
  <li>
    German
    <span>Language</span>
  </li>
</ul>

Answer 2

您可以通过以下小提琴轻松实现此目的。无需在代码中使用大量列表标签。始终尝试编写DRY代码。这是一个示例代码，您可以根据需要进行必要的修改

Fiddle

.lists {
   margin:0;
   padding:0;
   list-style:none;
   display:flex
 }
.lists li {
   display:flex;
   flex-direction:column;
   border-right: 1px solid #000000;
   padding: 4px 10px;
   justify-content:center;
   text-align:center;
   font-size:18px
}
.lists li:last-child {
   border:none
 }
.lists li > span:first-child {
   color: #11A8A1;
 }

Answer 3

Use below css.

.list-inline {
        list-style: none;
        padding: 0;
    }
    list-pipe > li {
        text-align: center;
        color: #11A8A1;

    }
    .list-inline > li {
        float: left;
        width: 150px;
        text-align: center;
    }

    .list-caption {
        list-style: none;
        padding: 0;
        clear: left;
    }
    .list-caption > li {
        text-align: center;
        float: left;
        width: 150px;
    }

Answer 4

最好的方法是使用flexbox。

.big {
  display: flex;
  flex-direction: column;
  align-items: cetner;
  justify-content: center;
}

.list-inline {
  list-style: none;
  padding: 0;
  display: flex;
}

.list-inline > li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.list-inline > li > .title {
  margin-bottom: 10px;
  color: #11A8A1;
}

.list-pipe > li {
  border-right: 1px solid #00000065;
  padding: 1em 1em 1em 1em;
  font-size: 15px;
  letter-spacing: 0.79px;
  text-align: center;
}

.list-inline > li:last-child {
 border-right: none;
}

<div class="big">
<ul class="list-inline list-pipe" >
  <li>
    <div class="title">Germany</div>
    <div>Place</div>
  </li>
  <li>
    <div class="title">1914-18</div>
    <div>Year</div>
  </li>
  <li>
    <div class="title">German</div>
    <div>Language</div>
  </li>
</ul>
</div>