如何更改div中的文本位置？

我有一個section, 里面有一個ul4 li。在每li一個div都將成為卡片。我想將文本集中在 div 內并將其放在更靠近底部的位置。我嘗試使用float: left，然后用頂部和左側邊距更改位置，但我無法集中它。

.cards2 {
  text-align: center;
}

.list2 {
  list-style: none;
}

.list2 li {
  display: inline-block;
}

.cardd2 {
  width: 200px;
  height: 300px;
  background-color: blue;
}

.list2 p {
  text-align: center;
}

<section class="cards2">
  <ul class="list2">
    <li>
      <div class="cardd2" id="card1">
        <p>Sobre mim</p>
      </div>
    </li>
    <li>
      <div class="cardd2" id="card2">
        <p>Projetos</p>
      </div>
    </li>
    <li>
      <div class="cardd2" id="card3">
        <p>Habilidades</p>
      </div>
    </li>
    <li>
      <div class="cardd2" id="card4">
        <p>Contato</p>
      </div>
    </li>
  </ul>
</section>

uj5u.com熱心網友回復：

將這些添加到 .cardd2

display: flex;
align-items: center;
justify-content: space-evenly;

注意他們年輕的padawan，你會經常使用它

也添加margin-bottom: 1vh;用于分離

顯示代碼片段

.cards2 {
  text-align: center;
}

.list2 {
  list-style: none;
}

.list2 li {
  display: inline-block;
}

.cardd2 {
  width: 200px;
  height: 300px;
  background-color: blue;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 1vh;
}

.list2 p {
  text-align: center;
}

<section class="cards2">
  <ul class="list2">
    <li>
      <div class="cardd2" id="card1">
        <p>Sobre mim</p>
      </div>
    </li>
    <li>
      <div class="cardd2" id="card2">
        <p>Projetos</p>
      </div>
    </li>
    <li>
      <div class="cardd2" id="card3">
        <p>Habilidades</p>
      </div>
    </li>
    <li>
      <div class="cardd2" id="card4">
        <p>Contato</p>
      </div>
    </li>
  </ul>
</section>

uj5u.com熱心網友回復：

我認為這是您想要的代碼。

我假設您需要將lis內的文本垂直居中，并希望它稍微向下到底部。

.cards2{
    text-align: center;
}

.list2{
    list-style: none;
    

}

.list2 li{
    display: inline-block;
}

.cardd2{
    width: 200px;
    height: 300px;
    background-color: rgb(107, 255, 240);

    display: flex;
        align-content: center;
        margin: 10px;
    justify-content: center;
}

.list2 p{
    text-align: center;
    display: flex;
    margin-top:100%;
}

<section class="cards2">
  <ul class="list2">
    <li>
      <div class="cardd2" id="card1"><p>Sobre mim</p></div>
    </li>
    <li>
      <div class="cardd2" id="card2"><p>Projetos</p></div>
    </li>
    <li>
      <div class="cardd2" id="card3"><p>Habilidades</p></div>
    </li>
    <li>
      <div class="cardd2" id="card4"><p>Contato</p></div>
    </li>
  </ul>
</section>

uj5u.com熱心網友回復：

將以下內容添加到.cardd2：

margin-bottom: .25rem;
display: flex;
align-items: center;
justify-content: center;

.cards2 {
    text-align: center;
}

.list2 {
    list-style: none;
}

.list2 li {
    display: inline-block;
}

.cardd2 {
    width: 200px;
    height: 300px;
    background-color: blue;
    margin-bottom: .25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list2 p {
    text-align: center;
}

<section class="cards2">
  <ul class="list2">
    <li>
      <div class="cardd2" id="card1"><p>Sobre mim</p></div>
    </li>
    <li>
      <div class="cardd2" id="card2"><p>Projetos</p></div>
    </li>
    <li>
      <div class="cardd2" id="card3"><p>Habilidades</p></div>
    </li>
    <li>
      <div class="cardd2" id="card4"><p>Contato</p></div>
    </li>
  </ul>
</section>

uj5u.com熱心網友回復：

也許像這樣：-

* {
  padding: 0px;
  margin: 0px;
}

.list2 {
  display: flex;
  positition: absloute;
  align items: center;
}

<section class="cards2">
  <ul class="list2">
    <li>
      <div class="cardd2" id="card1">
        <p>Sobre mim</p>

      </div>
    </li>
    <li>
      <div class="cardd2" id="card2">
        <p>Projetos</p>
      </div>
    </li>
    <li>
      <div class="cardd2" id="card3">
        <p>Habilidades</p>
      </div>
    </li>
    <li>
      <div class="cardd2" id="card4">
        <p>Contato</p>
      </div>
    </li>
  </ul>
</section>

標籤：

上一篇：如何使用GoogleApps腳本中的按鈕打開另一個頁面？

下一篇：如何在CSS中向上移動文本？