同一行上的文本和圖像的CSS定位

Question

如何將我的文本和圖像對齊在同一行上？

每當我使用填充或邊距它崩潰到我正在使用的圓形圖像。

#alignPhoto { 
 
    padding-right: 50px; 
 
    padding-left: 400px; 
 
} 
 
#alignCompany { 
 
    margin-left: 240px 
 
} 
 
#alignImage { 
 
    position: relative; 
 
    bottom: -250px; 
 
} 
 

 
.wrapper { 
 
    background: #C3C3C3; 
 
    padding: 20px; 
 
    font-size: 40px; 
 
    font-family: 'Helvetica'; 
 
    text-align: center; 
 
    position: relative; 
 
    width: 600px; 
 
} 
 
.wrapper:after { 
 
    content: ""; 
 
    width: 200px; 
 
    height: 0; 
 
    border-top: 42px solid transparent; 
 
    border-bottom: 42px solid transparent; 
 
    border-right: 40px solid white; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
}

<div id="alignPhoto"> 
 
    <div class="circle" id=image role="image"> 
 
    <img src="http://placehold.it/42x42"> 
 
    </div> 
 
</div> 
 
<div id=alignPhoto class="titleBoldText">Mary Smith</div> 
 
<div id=alignCompany class="titleText">Morris Realty and Investments</div> 
 
<br>

目前它這樣做是：

我想要的效果是這樣的：

任何幫助或建議，將不勝感激。

Answer 1

你讓它變得比它需要的複雜一點。只需將兩個元素作爲包裝（其中一個已經包含在alignImage中），將它們設置爲顯示爲inline-block，然後將vertical-align設置爲middle,top或任何您喜歡的東西。我擺脫了所有奇怪的填充，這與顯示器搞不清楚。還有貌似這是從垂直堆疊佈局緩繳

編輯 - 。你還要用ID alignPhoto兩個元素你真的，真的不應該這樣做，如果你需要的風格。兩個不同的元素與一個規則，請使用類代替。

#alignPhoto { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
#alignPhoto img { 
 
    border-radius: 100%; 
 
} 
 
#alignImage { 
 
    position: relative; 
 
} 
 
.alignText { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.titleBoldText { text-align: right; }

<div class="alignText"> 
 
    <div class="titleBoldText">Mary Smith</div> 
 
    <div id=alignCompany class="titleText">Morris Realty and Investments</div> 
 
</div> 
 
<div id="alignPhoto"> 
 
    <div class="circle" id=image role="image"> 
 
    <img src="http://placehold.it/42x42"> 
 
    </div> 
 
</div> 
 
<br>

Answer 2

一種快速而骯髒的方式將其包裹在一張桌子中，以便讓您的垂直對齊工作沒有任何問題。

<table> 
    <tr> 
     <td> 
      <div id="alignPhoto" class="titleBoldText">Mary Smith</div> 
      <div id="alignCompany" class="titleText">Morris Realty and Investments</div> 
     </td> 
     <td> 
      <img src="image/url" alt=""/> 
     </td> 
    </tr> 
</table> 

http://jsfiddle.net/7m5s6gd7/

Answer 3

什麼稍微簡單的版本：
HTML：

<div id="alignPhoto"> 
    <div class="content-wrapper"> 
     <p>Mary Smith</p> 
     <p>Morris Realty and Investments</p> 
    </div> 
    <div class="image-wrapper" id="image" role="image"> 
     <img src="http://placehold.it/250x200" /> 
    </div> 
</div> 

CSS：

.content-wrapper { float:left; } 
.image-wrapper img { border-radius:50%; } 
#alignPhoto { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
} 

JSFiddle爲
基本上您將兩段文字保留在一個格子中並將其左移。只有這一點才能完成這項工作。

編輯：
爲了使它更簡單，您可以使用flexbox垂直對齊。
我已經更新了答案。

Answer 4

確保元素從左到右正確放置的更有效和可擴展的解決方案之一是使用clear:both;的包裝div。在這些包裝div的內部，您可以使用float:left或float:right。包裝div允許你生成一個新的「行」。

#alignPhoto { 
 
    float: left; 
 
    margin-left: 10px; 
 
} 
 
#profileCompany, #profileName { 
 
    display:block; 
 
    width:100%; 
 
} 
 
#alignImage { 
 
    float: left; 
 
} 
 
.profileWrapper { 
 
    float:left; 
 
} 
 
/* Below creates a circle for the image passed from the backend */ 
 

 
.wrapper { 
 
    padding: 20px; 
 
    font-family: 'Helvetica'; 
 
    text-align: center; 
 
    position: relative; 
 
    width: 600px; 
 
    clear: both; 
 
} 
 
.profileWrapper:after { 
 
    content: ""; 
 
    width: 200px; 
 
    height: 0; 
 
    border-top: 42px solid transparent; 
 
    border-bottom: 42px solid transparent; 
 
    border-right: 40px solid white; 
 
    /* Tweak this to increase triangles height */ 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 
.circle { 
 
    display: block; 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: #cfcfcf; 
 
    -moz-border-radius: 25px; 
 
    -webkit-border-radius: 25px; 
 
    -khtml-border-radius: 25px; 
 
    border-radius: 25px; 
 
}

<div class="wrapper"> 
 

 
    <div class="profileWrapper"> 
 
     <div id=profileName class="titleBoldText">Mary Smith</div> 
 
     <div id=profileCompany class="titleText">Morris Realty and Investments</div> 
 
    </div> 
 
    <div id="alignPhoto"> 
 
     <div class="circle" id=image role="image"> 
 
     
 
     </div> 
 
    </div> 
 
</div>