Unable to center content of a div

Question

I'm creating a table with divs. I'm able to create it, but there is this instance where in there is a row where I need to do a merge and center.

Here is my code.

.divTable {
  display: table;
  width: 100%;
}

.divTableRow {
  display: table-row;
}

.divTableCell {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}

.divTableBody {
  display: table-row-group;
}

<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">$2</div>
      <div class="divTableCell">1</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;6</div>
    </div>
  </div>
</div>

Here I want 6 to be in center. How can I achieve this?

basically like below table

<table border="1px solid black">
  <tr>
    <td>$2</td>
    <td>1</td>
  </tr>
  <tr>
    <td colspan="2" align="center">6</td>
  </tr>
</table>

Just remove padding from `.tableCell` and add `text-align: center;`? — DarkBee, Dec 04 '17 at 09:12
@DarkBee, My apologies for the confusion, I was expecting 1st row with 2 cols and 2nd row with one col (`colspan="2"`) and center it. :( — user3872094, Dec 04 '17 at 09:14
well add a class to the div that acts as cell? Just like u have to do `align=center` on the td — DarkBee, Dec 04 '17 at 09:35

score 1 · Accepted Answer · answered Dec 04 '17 at 09:35

If this cell is going to be at the bottom then you can go for table-caption like this

<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">$2</div>
      <div class="divTableCell">1</div>
    </div>
  </div>
  <div class="divTableCaption">
    6
  </div>
</div>

css

.divTable {
  display: table;
  width: 100%;
}
.divTableRow {
  display: table-row;
}
.divTableCell {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}
.divTableBody {
  display: table-row-group;
}
.divTableCaption { /* <== Only added this */
  display: table-caption;
  text-align: center;
  border: 1px solid #999999;
  caption-side: bottom;
}

score 0 · Answer 2 · 2017-12-04T10:42:11.260

There is no colspan in CSS. (html-colspan-in-css)

A solution

.tr {
  width: 100%;
}

.tr:after {
  content: " ";
  display: table;
  clear: both;
}

.td {
  border: 1px solid;
  float: left;
  box-sizing: border-box;
  padding: 3px 10px;
}

.col-6 {
  width: 50%;
}

.col-12 {
  width: 100%;
}

.text-center {
  text-align: center;
}

<div class="table">
  <div class="tbody">
    <div class="tr">
      <div class="td col-6">$2</div>
      <div class="td col-6">1</div>
    </div>
    <div class="tr">
      <div class="td col-12 text-center">6</div>
    </div>
  </div>
</div>

Bootstraps' grid layout provides that.

Bootstrap solution

.bordered>div[class^=col-] {
  border: 1px solid;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row bordered">
    <div class="col-xs-6">A</div>
    <div class="col-xs-6">B</div>
  </div>
  <div class="row bordered">
    <div class="col-xs-12 text-center">C</div>
  </div>
</div>

score -1 · Answer 3 · answered Dec 04 '17 at 09:08

-1

Try this

.divTableRow{
width:100%;
display:flex;
justify-content:center;
}

answered Dec 04 '17 at 09:08

DPS

943
11
22

thanks for this, but this is making the cells small. here is a fiddle. `https://jsfiddle.net/xcjb126j/1/` – user3872094 Dec 04 '17 at 09:11

Unable to center content of a div

3 Answers3