如何将文本添加到由圆圈分隔的圆角矩形中
How to add text into rounded rectangle separating by a circle
我有一个 div 这样的:
编码如下:
<div class="col-12 p-5 mb-3">
<div class="mainInfo">
<div class="circle">
<img src="larger-logo.jpg">
</div>
</div>
</div>
我想在圆形的左侧和右侧添加一些文本:
所以我尝试了这个:
<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>info@sitename.com</p>
</div>
<div class="paraDivRight">
<p>Address</p>
<p>Postal Code</p>
<p><strong>Phone Number</strong></p>
</div>
</div>
</div>
但结果与预期相去甚远:
那么如何正确地将文字添加到圆形的右侧和左侧呢?
这里是 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;
}
更新:
我添加了这个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;
}
还是这样显示:
可以使用CSS布局-位置属性。在 CSS 文件中的 mainInfo、paraDivLeft 和 paraDivRight 类 添加如下位置值。
.mainInfo{
position: relative;
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;
}
.paraDivLeft{
position: absolute;
left: 16px;
}
.paraDivRight{
position: absolute;
right: 16px;
}
我认为你所拥有的大部分都可以工作,只需将行高更改为 1em 或其他值即可。
这是我的尝试。我还添加了 'top',然后添加了 'left' 或 'right' 以从绝对定位的边缘移开。我还为每个 paraDiv 部分使用了文本对齐:
.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,
.paraDivRight {
position: absolute;
display: inline-block;
padding: 10px;
}
.paraDivLeft {
left: 20px;
top: 40px;
text-align: left;
}
.paraDivRight {
right: 20px;
top: 50px;
text-align: right;
}
.paraDivLeft h6 {
font-size: 14pt;
margin: 0;
}
.paraDivLeft p,
.paraDivRight p {
line-height: 1em;
font-size: 12pt;
margin: 0;
}
<div class="col-12 p-5 mb-3">
<div class="mainInfo">
<div class="circle">
<img src="larger-logo.png">
</div>
<div class="paraDivLeft">
<h6>Site Name</h6>
<hr>
<p>www.sitename.com</p>
<p>info@sitename.com</p>
</div>
<div class="paraDivRight">
<p>Address</p>
<p>Postal Code</p>
<p><strong>Phone Number</strong></p>
</div>
</div>
</div>
我有一个 div 这样的:
编码如下:
<div class="col-12 p-5 mb-3">
<div class="mainInfo">
<div class="circle">
<img src="larger-logo.jpg">
</div>
</div>
</div>
我想在圆形的左侧和右侧添加一些文本:
所以我尝试了这个:
<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>info@sitename.com</p>
</div>
<div class="paraDivRight">
<p>Address</p>
<p>Postal Code</p>
<p><strong>Phone Number</strong></p>
</div>
</div>
</div>
但结果与预期相去甚远:
那么如何正确地将文字添加到圆形的右侧和左侧呢?
这里是 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;
}
更新:
我添加了这个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;
}
还是这样显示:
可以使用CSS布局-位置属性。在 CSS 文件中的 mainInfo、paraDivLeft 和 paraDivRight 类 添加如下位置值。
.mainInfo{
position: relative;
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;
}
.paraDivLeft{
position: absolute;
left: 16px;
}
.paraDivRight{
position: absolute;
right: 16px;
}
我认为你所拥有的大部分都可以工作,只需将行高更改为 1em 或其他值即可。
这是我的尝试。我还添加了 'top',然后添加了 'left' 或 'right' 以从绝对定位的边缘移开。我还为每个 paraDiv 部分使用了文本对齐:
.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,
.paraDivRight {
position: absolute;
display: inline-block;
padding: 10px;
}
.paraDivLeft {
left: 20px;
top: 40px;
text-align: left;
}
.paraDivRight {
right: 20px;
top: 50px;
text-align: right;
}
.paraDivLeft h6 {
font-size: 14pt;
margin: 0;
}
.paraDivLeft p,
.paraDivRight p {
line-height: 1em;
font-size: 12pt;
margin: 0;
}
<div class="col-12 p-5 mb-3">
<div class="mainInfo">
<div class="circle">
<img src="larger-logo.png">
</div>
<div class="paraDivLeft">
<h6>Site Name</h6>
<hr>
<p>www.sitename.com</p>
<p>info@sitename.com</p>
</div>
<div class="paraDivRight">
<p>Address</p>
<p>Postal Code</p>
<p><strong>Phone Number</strong></p>
</div>
</div>
</div>