內部帶有垂直和水平文本的 Div

Question

我需要重現這個 div：

它只是在頂部有一個圓圈（一個簡單的表情符號），在底部有兩個文本。

我試試這個，但它不像我預期的那樣工作

 .container { width: 70px; height: 400px; background-color: lightgray; display: flex; flex-wrap: wrap; align-content: space-between; justify-content: center; }.circle { }.bottom-container { display: flex; flex-direction: column; }.artist { border: 1px solid red; writing-mode: vertical-rl; transform: rotate(180deg); }.number { border: 1px solid lime; }

 <div class="container"> <div class="circle"></div> <div class="bottom-container"> <div class="artist">Artist - Never forget my love</div> <div class="number">03</div> </div> </div>

有什么問題？

Answer 1

你幾乎擁有它。 添加了 flex-direction: 列並切換對齊內容並在容器 div 上對齊內容。

 .container { width: 70px; height: 400px; background-color: lightgray; display: flex; flex-wrap: wrap; flex-direction: column; align-content: center; justify-content: space-between; }.circle { }.bottom-container { display: flex; flex-direction: column; }.artist { border: 1px solid red; writing-mode: vertical-rl; transform: rotate(180deg); }.number { border: 1px solid lime; }

 <div class="container"> <div class="circle"></div> <div class="bottom-container"> <div class="artist">Artist - Never forget my love</div> <div class="number">03</div> </div> </div>

Answer 2

圓形 div 應該占據全部空間。 將width和text-align添加到圓 class 完成了這項工作：

.circle {
  width: 100%;
  text-align: center;
}