How to do the horizontal alignment of HTML components - html

Question

Have a look on target code.Here I am trying to split the main div into 2 equal halves and place the 2 tables at center of each of them.
Please help me to do the same
<div id="title">
Split Screen into 2 equaly halves
</div>
<div >
<table id="myTable">
<tr >
<td ></td>
<td class="row_bottom"></td>
<td ></td>
</tr>
<tr >
<td class="row_top"></td>
<td class="row"></td>
<td class="row_top"></td>
</tr>
<tr >
<td ></td>
<td class="row_bottom"></td>
<td ></td>
</tr>
</table>
<table id="myTable">
<tr >
<td ></td>
<td class="row_bottom"></td>
<td ></td>
</tr>
<tr >
<td class="row_top"></td>
<td class="row"></td>
<td class="row_top"></td>
</tr>
<tr >
<td ></td>
<td class="row_bottom"></td>
<td ></td>
</tr>
</table>
</div>

Answer 1

There is no such thing as splitting one element into two halves. Instead make 2 elements and position them properly.
Make divs 50% of the width of the parent element (body in this case). Make them float to the left.
Align the tables inside using
margin: 50px auto;
Solution: https://jsfiddle.net/hnmgnLat/2/

Answer 2

Place the two tables in different divs.set the width of the two divs to 45% each. Then set the float of the first div to left. I hope this works. The 45% width should give room for margin and padding in case it exist. Or better still set all padding and margin to 0px and set the width to 50%

Answer 3

try like this
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
add this style in css
.parent {
width: 100%;
margin: 0 auto;
}
.child {
min-width:50%;
display:inline-block;
}

Answer 4

you can use an ID only one TIME in your CODE and then you do an left and right float
or you can use flexbox
.row
{
border: 2px solid black;
width: 100px;
height: 100px;
}
.row_top
{
width: 100px;
height: 100px;
border-top:2px solid black;
border-bottom:2px solid black;
}
.row_bottom
{
width: 100px;
height: 100px;
border-left:2px solid black;
border-right:2px solid black;
}
.test{
display:flex;
flex-direction:row;
justify-content: space-around;
}
#title
{
text-align: center;
border-bottom: 1px solid black;
width: 250px;
margin: auto;
padding: 10px;
}
<div id="title">
Split Screen into 2 equaly halves
</div>
<div class="test">
<table id="myTableleft">
<tr >
<td ></td>
<td class="row_bottom"></td>
<td ></td>
</tr>
<tr >
<td class="row_top"></td>
<td class="row"></td>
<td class="row_top"></td>
</tr>
<tr >
<td ></td>
<td class="row_bottom"></td>
<td ></td>
</tr>
</table>
<table id="myTableright">
<tr >
<td ></td>
<td class="row_bottom"></td>
<td ></td>
</tr>
<tr >
<td class="row_top"></td>
<td class="row"></td>
<td class="row_top"></td>
</tr>
<tr >
<td ></td>
<td class="row_bottom"></td>
<td ></td>
</tr>
</table>
</div>