如何将文本添加到由圆分隔的圆角矩形中

Posted 2023-03-05

【中文标题】如何将文本添加到由圆分隔的圆角矩形中

【英文标题】：How to add text into rounded rectangle separating by a circle

【发布时间】：2022-01-22 19:53:55

【问题描述】：

我有一个这样的 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>[e-mail]</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;

还是这样显示：

【参考方案1】：

我认为你所拥有的大部分都可以工作，只需将行高更改为 1em 或其他东西。

这是我的尝试。我还添加了“顶部”，然后添加了“左”或“右”，以通过绝对定位远离边缘。我还为每个 paraDiv 部分使用了 text-align：

.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>[e-mail]</p>
        </div>
        <div class="paraDivRight">
            <p>Address</p>
            <p>Postal Code</p>
            <p><strong>Phone Number</strong></p>
        </div>
    </div>
</div>

【参考方案2】：

可以为此使用 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;

【讨论】：

我试过但没有得到正确的结果，请看我的UPDATE