如何將文本添加到由圓圈分隔的圓角矩形中

我有一個這樣的 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>[email protected]</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;
}

仍然顯示如下：

uj5u.com熱心網友回復：

我認為你所擁有的大部分都可以作業，只需將行高更改為 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>[email protected]</p>
        </div>
        <div class="paraDivRight">
            <p>Address</p>
            <p>Postal Code</p>
            <p><strong>Phone Number</strong></p>
        </div>
    </div>
</div>

uj5u.com熱心網友回復：

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

標籤：html css 推特引导 分配 bootstrap-3

上一篇：在.NETCore中使用HTTPPOST添加新物件時出錯

下一篇：將值傳遞給Django中的模態