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

我有这个演示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

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

回答

相关问题