cssを使用したdiv内の画像とテキストの配置

debugcn 投稿 Dev

ニーラジ

私はモバイルアプリに取り組んでいますが、divの1行にテキストと画像を配置する方法がわかりません。

可能かどうか教えてください。

以下は私が取得しようとしている画像です！

以下は私のコードです。イメージのようにしたいと思います。前もって感謝します

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

Suresh Karia

私は何かを試しました、これはあなたが探しているものですか？

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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]