CODEWITHSUNDEEP
htmlcss
user8336738
user8336738

Reputation: 77

Align span to center of div

I am trying to find a way how to understand and solve this problem with centering span in a div. My problem is that when the window is resized the table shrinks and the text in first column gets wrapped onto second line which is fine but it causes the bottom border to be out of alignment with rest of row, alternatively when I put min-height on the line which solves the unaligned bottom border but then the span in first column is stuck to the top. I tried to find how to align span in div but the most common practice that I found which used absolute position doesn't work really well since the content now doesn't fit well within the box.

I made an jsfiddle here which roughly shows the problem, if you add min-height: 34px; to .table-cell class it will solve the aligned line but then the spans are not centered.

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

Upvotes: 1

Views: 304

Answers (2)

Kumara
Kumara

Reputation: 538

Answer for Question: "Align span to center of div"

To align the span tag to the center of the div, just use "CSS Flexible Box Layout" directly to the span tag.

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

Working Solution : 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>

This above solution solves the problem and raises another, that it makes all width of the span tag to the same. It makes the border-bottom property weird by expanding the 'dotted-line' to the full width available.

To make the border-bottom to the same width of the text above in the span

Add the width and margin property together with the values below to fix the new problem if wanted.

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

Working Solution : 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>

The width: fit-content; declaration makes the width of the span to the exact width of the text inside in it along with the "bottom border line". And the margin: 0 auto; aligns the 'span' in center by adding side margins.

I hope this may solve the problem.

According to the comment of @user8336738

Solution for aligning the lines of cells and also align the span tag in both vertical and horizontal axis. Add these lines to the div container.

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

A little JavaScript is used to align the lines of table cells to the same.

<!-- 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>

Working Solution : 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>

Upvotes: 1

U-33
U-33

Reputation: 139

image

if this is what you are looking for then I have added below code inside table-cell class

display:flex;
justify-content:center;

Upvotes: 0

Related Questions