Is there a way to perfectly center two buttons or clickable boxes, creating a layout similar to the image shown below?
https://i.sstatic.net/Va1z2.png
This is what has been attempted so far:
CSS file
.container_1 .panel_1 {
position: absolute;
top: 35%;
left: 45%;
transform: translateX(-50%) translateY(-50%);
}
.container_2 .panel_2 {
position: absolute;
top: 35%;
left: 55%;
transform: translateX(-50%) translateY(-50%);
}
HTML file
{% block content %}
<div class="container_1">
<div class="panel_1">
<form class="form-horizontal" action="{% url 'left' %}" method="get">
<input type="submit" value="left" class="btn btn-lg btn-primary">
</form>
</div>
</div>
<div class="container_2">
<div class="panel_2">
<form class="form-horizontal" action="{% url 'right' %}" method="get">
<input type="submit" value="right" class="btn btn-lg btn-primary">
</form>
</div>
</div>
{% endblock %}
Any suggestions on how to adjust the code to achieve the layout depicted in the image above?