如何在文字旁邊放置文字？

我有這個演示https://jsfiddle.net/447cv32f/。我想要將這個圈子和文字居中。任何建議如何做到這一點？如何在文字旁邊放置文字？

<div class="public_profile"> 
    <div class="profile_image business"> 
     <img src="img/realestate_icon.png" /> 
    </div> 
    <h4>BUSINESS ACCOUNT</h4> 
    <h3>Sunny Real Estate Sarl.</h3> 
    <hr class="business_line" /> 
    <h5>VERIFIED USER</h5> 
    <h5 class="registered">Registered on January 27th 2016</h5> 
</div>

來源

2016-05-06 None

是否要水平或垂直定位圈和文字？ – Pugazh

裹有一個div文字和移動Flex樣式到.public_profile容器

.public_profile { 
 
    float: left; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.public_profile .profile_image { 
 
    border-radius: 50%; 
 
    float: left; 
 
    width: 120px; 
 
    height: 120px; 
 
    margin-right: 15px; 
 
    overflow: hidden; 
 
} 
 
.public_profile .profile_image.business { 
 
    background-color: #fdb902; 
 
} 
 
.public_profile .profile_image img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.public_profile h4 { 
 
    font-family: 'OpenSans-ExtraBold'; 
 
    font-size: 12px; 
 
    color: #a1d15f; 
 
    margin: 0; 
 
} 
 
.public_profile h3 { 
 
    font-family: 'OpenSans-Light'; 
 
    font-size: 24px; 
 
    color: #1e1e1e; 
 
    margin: 0; 
 
} 
 
.public_profile h5 { 
 
    font-family: 'OpenSans-Regular'; 
 
    font-size: 12px; 
 
    color: #4d5663; 
 
    margin: 0; 
 
} 
 
.public_profile h5.registered { 
 
    font-size: 11px; 
 
    color: #4c4d4d; 
 
} 
 
hr.business_line { 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    width: 30px; 
 
    display: inline-block; 
 
    border-top: 2px solid #a1d15f; 
 
}

<div class="public_profile"> 
 
    <div class="profile_image business"> 
 
    <img src="img/realestate_icon.png" /> 
 
    </div> 
 
    <div> 
 

 
    <h4>BUSINESS ACCOUNT</h4> 
 
    <h3>Sunny Real Estate Sarl.</h3> 
 
    <hr class="business_line" /> 
 
    <h5>VERIFIED USER</h5> 
 
    <h5 class="registered">Registered on January 27th 2016</h5> 
 
    </div> 
 
</div>

來源

2016-05-06 10:56:23 Aaron

（編輯:)版

https://jsfiddle.net/up7n90fc/

認沽一個包裝PPER周圍所有的文字，定義其內容元素爲塊元素居中他們：

<div class="public_profile"> 
    <div class="profile_image business"> 
     <img src="img/realestate_icon.png" /> 
    </div> 
    <div class="wrap1"> 
     <h4>BUSINESS ACCOUNT</h4> 
     <h3>Sunny Real Estate Sarl.</h3> 
     <hr class="business_line" /> 
     <h5>VERIFIED USER</h5> 
     <h5 class="registered">Registered on January 27th 2016</h5> 
    </div> 
</div>

CSS：

.wrap1 { 
    text-align: center; 
} 
.wrap1 > * { 
    display: block; 
}

（您可以在寬度增加了包裝）

來源

2016-05-06 10:58:24 Johannes

再舉一個元素與display:inline-block，並通過給文本對齊：中心到你的包裝（public_profile）使他們中心。

例如：

HTML

<div class="public_profile"> 
    <div class="center"> 
    <div class="profile_image business"> 
     <img src="img/realestate_icon.png" /> 
    </div> 
    <h4>BUSINESS ACCOUNT</h4> 
    <h3>Sunny Real Estate Sarl.</h3> 
    <hr class="business_line" /> 
    <h5>VERIFIED USER</h5> 
    <h5 class="registered">Registered on January 27th 2016</h5> 
    </div> 

</div>

CSS

.center { 
    overflow: hidden; 
    width: 400px; 
    text-align: left; 
    display: inline-block; 
}

小提琴here

來源

2016-05-06 11:01:48

添加一個容器div圍繞文本旁邊的圓圈，則G香港專業教育學院父容器display:flex，align-items:center和justify-content:center

即 HTML

<div class="public_profile"> 
    <div class="profile_image business"> 
    <img src="img/realestate_icon.png" /> 
    </div> 
    <div class="profile-container"> 
    <h4>BUSINESS ACCOUNT</h4> 
    <h3>Sunny Real Estate Sarl.</h3> 
    <hr class="business_line" /> 
    <h5>VERIFIED USER</h5> 
    <h5 class="registered">Registered on January 27th 2016</h5> 
    </div> 
</div>

CSS

.public_profile{ 
    float: left; 
    width: 100%; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    border:solid 1px red; 
} 

.public_profile .profile-container { 
    border:solid 1px green; 
} 

.public_profile .profile_image{ 
    border-radius: 50%; 
    float: left; 
    width: 120px; 
    height: 120px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-right: 15px; 
    overflow: hidden; 
} 
.public_profile .profile_image.business{ 
    background-color: #fdb902; 
} 
.public_profile .profile_image img{ 
    width: 100%; 
    height: 100%; 
} 
.public_profile h4{ 
    font-family: 'OpenSans-ExtraBold'; 
    font-size: 12px; 
    color: #a1d15f; 
    margin: 0; 
} 
.public_profile h3{ 
    font-family: 'OpenSans-Light'; 
    font-size: 24px; 
    color: #1e1e1e; 
    margin: 0; 
} 
.public_profile h5{ 
    font-family: 'OpenSans-Regular'; 
    font-size: 12px; 
    color: #4d5663; 
    margin: 0; 
} 
.public_profile h5.registered{ 
    font-size: 11px; 
    color: #4c4d4d; 
} 
hr.business_line{ 
    margin-top: 0; 
    margin-bottom: 0; 
    width: 30px; 
    display: inline-block; 
    border-top: 2px solid #a1d15f; 
}

（注：邊界是純粹是爲了顯示的目的）

Fiddle example

編輯：好吧，所以我誤解了一點，我也垂直居中文本旁邊的圓以及水平居中的一切，容器中的align-items:center垂直居中一切，而justify-content:center水平居中它，只要使用任何一個解決你的問題:)

來源

2016-05-06 11:08:31

試試這個：

<style type="text/css"> 
.text{text-align:center;} 
</style> 

<div class="public_profile"> 
<div class="profile_image business"> 
    <img src="img/realestate_icon.png" /> 
</div> 
<div class="text"> 
<h4>BUSINESS ACCOUNT</h4> 
<h3>Sunny Real Estate Sarl.</h3> 
<hr class="business_line" /> 
<h5>VERIFIED USER</h5> 
<h5 class="registered">Registered on January 27th 2016</h5> 
</div> 
</div>

來源

2016-05-06 11:10:20 user3828351

如何在文字旁邊放置文字？

回答

相關問題