画像の隣にテキストを配置する方法は？

Question

私はこのデモを持っています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> 

Answer 1

ラップのdivとテキストと.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>

Answer 2

（編集されたバージョン:)

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; 
} 

（あなたがラッパーに幅を追加することができます）

Answer 3

は別の要素を取りますdisplay:inline-blockとし、text-align：centerをラップ（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

Answer 4

グラム次いで、次の円にテキストの周囲に容器divを追加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> 

.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; 
} 

は

CSS（注：境界は表示目的のために純粋にされている）

Fiddle example

編集：OK、少し誤解があったので、円の横にテキストを縦に配置し、すべてを水平に配置すると、コンテナ内のalign-items:centerはすべて垂直方向に中央に配置され、justify-content:centerは水平に配置されます。問題:)

Answer 5

はこれを試してみてください：

<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>