Позиционирование изображения и текста в div с помощью css

Question

Я работаю над мобильным приложением, я не понимаю, как разместить текст и изображение в одной строке в div.

Пожалуйста, дайте мне знать, если это возможно или нет.

Ниже приведено изображение, что я пытаюсь получить!

Ниже приведен мой код. Я хочу, чтобы это было как образ. Заранее спасибо

<style> 
    div.centeredTable { 
    margin: 0 auto; 
    width: 250px; 
    background-color:#C0C0C0;} 
    .centeredTable table { 
    width: 100%; } 

    .centeredTable td { 
    vertical-align: middle; 
    text-align: center; } 



    .centeredTable tr td:first-child { 
    width: 20%;} 
    .centeredTable tr td:last-child { 
    width: 80%; } 
    </style> 


    <div data-role="page" data-theme="a" id="demo-page" class="my-page"> 
    <div class="panel" > 
    <div class="centeredTable"> 
     <table class="centeredTable"> 
     <tr> 
      <td><img src="doc/3.png" /></td> 
      <td><a href="document.html" rel="external" class="ui-btn ui-corner-all custom-btn ui-shadow ui-mini">My Documents <span class="ui-li-count" >12</span></a></td> 
     </tr> 
     </table> 
     </div> 
     </div> 
     </div> 

Answer 1

Я пробовал что-то, это то, что вы ищете?

div.centeredTable { 
 
    margin: 0 auto; 
 
    width: 250px; 
 
    height: 50px; 
 
    background-color: #fff; 
 
    border: 2px solid #07a; 
 
    border-radius: 12px; 
 
    line-height: 3; 
 
} 
 
.centeredTable table { 
 
    width: 100%; 
 
} 
 
.centeredTable td { 
 
    vertical-align: middle; 
 
    position: relative; 
 
} 
 
.centeredTable tr td:first-child { 
 
    width: 20%; 
 
} 
 
.centeredTable tr td:last-child { 
 
    width: 80%; 
 
} 
 
.ui-li-count { 
 
    background: #fff; 
 
    position: absolute; 
 
    height: 30px; 
 
    right: -2px; 
 
    line-height: 2; 
 
    top: -2px; 
 
    padding: 10px; 
 
    border-left: 1px solid #07a; 
 
    border-top-right-radius: 12px; 
 
    border-bottom-right-radius: 12px; 
 
} 
 
td:first-child img { 
 
    border: 2px solid #07a; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    top: 6px; 
 
    left: -18px; 
 
    z-index: 999; 
 
} 
 
td a { 
 
    text-decoration: none; 
 
    color: #000; 
 
    font-family: sans-serif; 
 
}

<div data-role="page" data-theme="a" id="demo-page" class="my-page"> 
 
    <div class="panel"> 
 
    <div class="centeredTable"> 
 
     <table class="centeredTable"> 
 
     <tr> 
 
      <td> 
 
      <img src="http://placekitten.com/g/200/200" height="32" width="32" /> 
 
      </td> 
 
      <td><a href="document.html" rel="external" class="ui-btn ui-corner-all custom-btn ui-shadow ui-mini">My Documents <span class="ui-li-count" >12</span></a> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>