將跨度對齊到 div 的中心

Question

我正在嘗試找到一種方法來理解和解決在 div 中居中跨度的問題。 我的問題是，當調整窗口大小時，表格會縮小，第一列中的文本會被包裹到第二行，這很好，但它會導致底部邊框與行的其余部分不對齊，或者當我把min-height放在解決未對齊的底部邊框但第一列中的跨度被粘在頂部的線。 我試圖找到如何在 div 中對齊跨度，但我發現使用絕對位置的最常見做法並不能很好地工作，因為現在內容不適合框內。

如果添加min-height: 34px; 到.table-cell類，它將解決對齊的線，但跨度不居中。

https://jsfiddle.net/xonh5rq6/32/

Answer 1

問題答案：“將跨度對齊到 div 的中心”

要將span標簽與div的中心對齊，只需將“CSS Flexible Box Layout”直接用於span標簽即可。

.table-cell-service {
  display: flex;
  justify-content: center;
}

工作解決方案：1

 .table { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; width: 500px; } .table-cell { font-size: 15px; padding: 13px; border: 1px solid black; min-width: 60px; min-height: 34px; } .table-cell-service { border-bottom: dotted #808080; /* This aligns the span in the center of the div */ display: flex; justify-content: center; }

 <div class="table"> <div class="column"> <div class="table-cell"> <span class="table-cell-service">My very long Text My very long Text</span> </div> <div class="table-cell"> <span class="table-cell-service">My Text</span> </div> <div class="table-cell"> <span class="table-cell-service">My Text</span> </div> <div class="table-cell"> <span class="table-cell-service">My Text</span> </div> <div class="table-cell"> <span class="table-cell-service">My Text</span> </div> </div> <div class="column"> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> </div> <div class="column"> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> </div> <div class="column"> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> </div> <div class="column"> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> </div> </div>

上面的解決方案解決了這個問題並提出了另一個問題，它使span標簽的所有寬度都相同。 通過將“虛線”擴展到可用的全寬，它使border-bottom屬性變得奇怪。

使border-bottom與span中上述文本的寬度相同

如果需要，將width和margin屬性與下面的值一起添加以解決新問題。

.table-cell-service {
  width: fit-content;
  margin: 0 auto;
}

工作解決方案：2

 .table { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; width: 500px; } .table-cell { font-size: 15px; padding: 13px; border: 1px solid black; min-width: 60px; min-height: 34px; } .table-cell-service { border-bottom: dotted #808080; /* This aligns the span in the center of the div */ display: flex; justify-content: center; /* These blocks are added to shrink width as well as the border-bottom */ width: fit-content; margin: 0 auto; }

 <div class="table"> <div class="column"> <div class="table-cell"> <span class="table-cell-service">My very long Text My very long Text</span> </div> <div class="table-cell"> <span class="table-cell-service">My Text</span> </div> <div class="table-cell"> <span class="table-cell-service">My Text</span> </div> <div class="table-cell"> <span class="table-cell-service">My Text</span> </div> <div class="table-cell"> <span class="table-cell-service">My Text</span> </div> </div> <div class="column"> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> </div> <div class="column"> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> </div> <div class="column"> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> </div> <div class="column"> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> </div> </div>

width: fit-content; 聲明使span的寬度與其中文本的確切寬度以及“底部邊框線”一起。 和margin: 0 auto; 通過添加側邊距使“跨度”居中對齊。

我希望這可以解決問題。

根據@user8336738 的評論

對齊單元格行以及在垂直和水平軸上對齊span標簽的解決方案。 將這些行添加到div容器中。

.table-cell {
  display: flex;
  align-items: center;
}

使用一點 JavaScript 將表格單元格的行對齊。

<!-- Script for making the table cells to the same size -->
<script>
  // Getting all the table cells which is the 'div' around the 'span' tag
  let tableCells = document.querySelectorAll(".table-cell")

  // Looping througn each cell and getting the maximum height
  let maximumHeight = 0
  tableCells.forEach((cell) => {

    let cellHeight = parseInt(window.getComputedStyle(cell).height)
    if (cellHeight > maximumHeight) {
      maximumHeight = cellHeight
    }

  })

  // Setting the maximum height as height of all the 'div' 
  tableCells.forEach((cell) => {cell.style.height = `${maximumHeight}px`})

</script> 

工作解決方案：3

 .table { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; width: 500px; } .table-cell { font-size: 15px; padding: 13px; border: 1px solid black; min-width: 60px; min-height: 34px; /* These lines vertically center-aligns the content inside this element*/ display: flex; align-items: center; } .table-cell-service { border-bottom: dotted #808080; /* This aligns the span in the center of the div */ display: flex; justify-content: center; /* These blocks are added to shrink width as well as the border-bottom */ width: fit-content; margin: 0 auto; }

 <div class="table"> <div class="column"> <div class="table-cell"> <span class="table-cell-service">My very long Text My very long Text</span> </div> <div class="table-cell"> <span class="table-cell-service">My Text</span> </div> <div class="table-cell"> <span class="table-cell-service">My Text</span> </div> <div class="table-cell"> <span class="table-cell-service">My Text</span> </div> <div class="table-cell"> <span class="table-cell-service">My very very very long Text which may increase the container height</span> </div> </div> <div class="column"> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> </div> <div class="column"> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> </div> <div class="column"> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> </div> <div class="column"> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> <div class="table-cell"> <span>My Text</span> </div> </div> </div> <!-- Script for making the table cells to the same size --> <script> // Getting all the table cells which is the 'div' around the 'span' tag let tableCells = document.querySelectorAll(".table-cell") // Looping througn each cell and getting the maximum height let maximumHeight = 0 tableCells.forEach((cell) => { let cellHeight = parseInt(window.getComputedStyle(cell).height) if (cellHeight > maximumHeight) { maximumHeight = cellHeight } }) // Setting the maximum height as height of all the 'div' tableCells.forEach((cell) => { cell.style.height = `${maximumHeight}px` }) </script>

Answer 2

如果這是您要查找的內容，那么我在表格單元類中添加了以下代碼

display:flex;
justify-content:center;