I am currently working with Bootstrap 3 and I have a specific requirement to center a div within a cell in the container row. Most resources I found only mention how to center a div within the entire container, which is not what I am looking for. My goal is to find out how to center the div both vertically and horizontally within the particular cell it is placed in. The reason for this is that on the same row, I have other divs with larger heights and at the end of the row, I want to place a smaller button. To make the layout visually appealing, I need to center this button within its cell.
Up until now, my attempted solution involved modifying the following code snippet in the bootstrap.min.css file:
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td{
padding:8px;
line-height:1.42857143;
vertical-align:top;
border-top:1px solid #ddd}
to:
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td{
padding:8px;
line-height:1.42857143;
vertical-align:middle;
border-top:1px solid #ddd}
However, after making this change, nothing seemed to happen, indicating that I may not be on the right track.