I have been trying to center the content of my div that contains the tags "h1, p & table". Due to the table the styling of my page wont allow me to center the second divs contents. It is something I have trialed and tested but to no avail. Would anyone be able to help me out?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="container-fluid" style="background-color: rgba(0, 0, 0, 0.8); color: white;">
<div class="row">
<div class="col-md-12" style="padding-left:0; padding-right:0;">
<img src="images/Charlie-Co.-Barbershop-West-Chester-3.png" class="img" width="100">
<a
href="https://booksy.com/en-ie/3715_charlies-barbers-lucan_barbers_52867_ireland"
class="carousel-caption">Book now!</a>
</div>
</div>
<div class="row">
<div
class="col-md-9 border-right border-bottom border-dark"
style="padding-left: 0; padding-right: 0;" id="OpenTime">
<div class="row">
<div class="col-md-6">
<h1 style="font-family: Playfair Display;">Test Barbershop</h1>
<p style="font-family: Quicksand;text-align: justify;">
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non ultricies velit, eget suscipit velit. Nam laoreet magna ornare ex ornare ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vel tincidunt velit. Nam sed est metus. Maecenas commodo dolor non lorem semper malesuada. Aliquam tempor blandit sapien in sodales. Integer eu metus efficitur ligula mattis pretium. Donec finibus mi non sodales condimentum. Donec elementum nunc quis mauris pulvinar porta. Sed sed est eget justo vestibulum malesuada vitae at nulla. Suspendisse quis efficitur lorem. Phasellus non ornare ante. Mauris ullamcorper, ligula in malesuada malesuada, purus nibh pretium dui, ac eleifend purus mauris vel nisi. Sed lacinia hendrerit magna at pharetra. Suspendisse quis varius diam, et ultricies dui. In scelerisque felis ac sapien bibendum, eget iaculis nisl egestas. Proin tempor et magna eu molestie. Praesent consequat lorem ut accumsan vehicula. Nunc luctus turpis non sollicitudin fermentum. Fusce nec viverra ex, sit amet tristique turpis.ù
</p>
</div>
<div class="col-md-6" id="OpenTime">
<h1 style="font-family: Playfair Display;">Opening hours</h1>
<p style="font-family: Quicksand;">
<br>
Hours could change depending on Holidays & Bank Holidays
</p>
<table>
<tr class="monday fvl-d">
<td><span>Monday</span></td>
<td>9:30 - 18:30</td>
</tr>
<tr class="tuesday fvl-d">
<td><span>Tuesday</span></td>
<td>9:30 - 18:30</td>
</tr>
<tr class="wednesday fvl-d">
<td><span>Wednesday</span></td>
<td>9:30 - 18:30</td>
</tr>
<tr class="thursday fvl-d">
<td><span>Thursday</span></td>
<td>9:30 - 19:00</td>
</tr>
<tr class="friday fvl-d">
<td><span>Friday</span></td>
<td>9:30 - 19:00</td>
</tr>
<tr class="saturday fvl-d">
<td><span>Saturday</span></td>
<td>9:00 - 18:00</td>
</tr>
<tr class="sunday fvl-d">
<td><span>Sunday</span></td>
<td>11:00 - 15:30</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>Thanks in advance to anyone who might have any suggestions!
you have a fluid container, so just add justify-content-center to the row to actualy center its childs.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" style="background-color: rgba(0, 0, 0, 0.8); color: white;">
<div class="row">
<div class="col-md-12" style="padding-left:0; padding-right:0;">
<img src="images/Charlie-Co.-Barbershop-West-Chester-3.png" class="img" width="100">
<a href="https://booksy.com/en-ie/3715_charlies-barbers-lucan_barbers_52867_ireland" class="carousel-caption">Book now!</a></div>
</div>
<!-- here is the class added -->
<div class="row justify-content-center">
<div class="col-md-9 border-right border-bottom border-dark" style="padding-left: 0; padding-right: 0;" id="OpenTime">
<div class="row">
<div class="col-md-6">
<h1
style="font-family: Playfair Display;">
Test Barbershop</h1>
<p
style="font-family: Quicksand;
text-align: justify;">
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non ultricies velit, eget suscipit velit. Nam laoreet magna ornare ex ornare ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vel tincidunt velit. Nam sed est metus. Maecenas commodo dolor non lorem semper malesuada. Aliquam tempor blandit sapien in sodales. Integer eu metus efficitur ligula mattis pretium. Donec finibus mi non sodales condimentum. Donec elementum nunc quis mauris pulvinar porta. Sed sed est eget justo vestibulum malesuada vitae at nulla. Suspendisse quis efficitur lorem. Phasellus non ornare ante. Mauris ullamcorper, ligula in malesuada malesuada, purus nibh pretium dui, ac eleifend purus mauris vel nisi. Sed lacinia hendrerit magna at pharetra. Suspendisse quis varius diam, et ultricies dui. In scelerisque felis ac sapien bibendum, eget iaculis nisl egestas. Proin tempor et magna eu molestie. Praesent consequat lorem ut accumsan vehicula. Nunc luctus turpis non sollicitudin fermentum. Fusce nec viverra ex, sit amet tristique turpis.</p>
</div>
<div class="col-md-6" id="OpenTime">
<h1 style="font-family: Playfair Display;">Opening hours</h1>
<p style="font-family: Quicksand;"><br>Hours could change depending on Holidays & Bank Holidays</p>
<table>
<tr class="monday fvl-d">
<td><span>Monday</span></td>
<td>9:30 - 18:30</td>
</tr>
<tr class="tuesday fvl-d">
<td><span>Tuesday</span></td>
<td>9:30 - 18:30</td>
</tr>
<tr class="wednesday fvl-d">
<td><span>Wednesday</span></td>
<td>9:30 - 18:30</td>
</tr>
<tr class="thursday fvl-d">
<td><span>Thursday</span></td>
<td>9:30 - 19:00</td>
</tr>
<tr class="friday fvl-d">
<td><span>Friday</span></td>
<td>9:30 - 19:00</td>
</tr>
<tr class="saturday fvl-d">
<td><span>Saturday</span></td>
<td>9:00 - 18:00</td>
</tr>
<tr class="sunday fvl-d">
<td><span>Sunday</span></td>
<td>11:00 - 15:30</td>
</tr>
</table>
</div>