Here is a div structure:
https://i.sstatic.net/wN1Vm.png
With the following code:
<div class="col-12 p-5 mb-3">
<div class="mainInfo">
<div class="circle">
<img src="larger-logo.jpg">
</div>
</div>
</div>
I wanted to add text on both sides of the circle shape, so I attempted this:
https://i.sstatic.net/8Sv8B.jpg
Here's my attempt:
<div class="col-12 p-5 mb-3">
<div class="mainInfo">
<div class="circle">
<img src="larger-logo.jpg">
</div>
<div class="paraDivLeft">
<h6>Site Name</h6>
<hr>
<p>www.sitename.com</p>
<p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef86818980af9c869b8a818e828ac18c8082">[email protected]</a></p>
</div>
<div class="paraDivRight">
<p>Address</p>
<p>Postal Code</p>
<p><strong>Phone Number</strong></p>
</div>
</div>
</div>
However, the result was not what I expected:
https://i.sstatic.net/iKASS.png
How can I properly position the texts on either side of the circle?
Below are the CSS codes used:
.mainInfo{
background-color: #fff;
border: .01rem round #e0e1ed;
border-radius: 20px;
color: #585CA1;
width:100%;
height:5em;
box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.75);
margin-top: 3em;
display: flex;
align-items: center;
justify-content: center;
}
.circle {
position: relative;
left:20%;
width: 9em;
height: 9em;
background: #fff;
border-radius: 50%;
box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.65);
}
.circle img {
position: absolute;
max-width: 85%;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
}
UPDATE:
I included this additional CSS:
.mainInfo{
background-color: #fff;
border: .01rem round #e0e1ed;
border-radius: 20px;
color: #585CA1;
width:100%;
height:5em;
box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.75);
margin-top: 3em;
display: flex;
align-items: center;
justify-content: center;
}
.circle {
position: relative;
left:20%;
width: 9em;
height: 9em;
background: #fff;
border-radius: 50%;
box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.65);
}
.circle img {
position: absolute;
max-width: 85%;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
}
.paraDivLeft{
position: absolute;
left: 16px;
}
.paraDivRight{
position: absolute;
right: 16px;
}
Yet, the layout remains unchanged: