定位的圖像和文本在使用CSS的DIV

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>