テキストなしで画像をHTMLに並べる方法

Question

既存のhtmlを変更して請求書を作成しようとしています。私は、ページの上部に画像（ロゴ）を入れ、その下にテーブルを開始したいと思います。私が持っている問題は、私が何をしてもテーブルのテキストがイメージの横に表示されることです。私はイメージの周りにテキストをラップするためのあらゆる種類のアイデアを見つけましたが、イメージの周りにテキストを実際にはラップしません。イメージのキャプションを除いて、私が望むものではありません。私が持っているコードは次のとおりです。 -

<style> 
 
div.logo {float: right;} 
 
table {width: 100%; table-layout: fixed;} 
 
.twenty {width: 20%; } 
 
.thirty {width: 30%; } 
 
.fifty {width: 50%; } 
 
</style> 
 
<div class = "logo"> 
 
    <img align="right" src="https://cdn.shopify.com/s/files/1/1212/3100/files/logo.png?14279783622096777710" width="30%" height="30%"><br clear="all"> 
 
</div> 
 
<table> 
 
    <colgroup> 
 
    <col class="fifty" /> 
 
    <col class="twenty" /> 
 
    <col class="thirty" /> 
 
    </colgroup> 
 
    <tbody> 
 
    <tr> 
 
     <td></td> 
 
     <td>Invoice Date</td> 
 
     <td>{{ shop_name }}</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>Date {{created_at | date: "%d/%m/%y" }}</td> 
 
     <td>{{ shop.address }}</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

すべてのヘルプは本当に感謝しています。私はあなたがOKであればLink to my invoice render

Answer 1

は、以下のようなあなたのコードですべての問題がなかったように見えます、表の最初の列は、単に空だった、あなたはcolgroup.fiftyスタイルから、それにwidth: 50%を持っています。これは、テーブルが右に押されたように見えるようにしていました。

はそれがより明確にするために背景色とここにペンを参照してください：https://codepen.io/lauraeddy/pen/zPYKva

Answer 2

はこれを試してみてください何を得る

。画像はdivの中央に配置されます。

<div class = "logo"> 
    <img align="right" src="https://cdn.shopify.com/s/files/1/1212/3100/files/logo.png?14279783622096777710" width="30%" height="30%"><br clear="all"> 
</div> 

.logo { 
    width: 100%; 
    text-align: center; 
    justify-content: center; 
    display: flex; 
} 

<div class="table"> 
<table> 
    <colgroup> 
    <col class="fifty" /> 
    <col class="twenty" /> 
    <col class="thirty" /> 
    </colgroup> 
    <tbody> 
    <tr> 
     <td></td> 
     <td>Invoice Date</td> 
     <td>{{ shop_name }}</td> 
    </tr> 
    <tr> 
     <td></td> 
     <td>Date {{created_at | date: "%d/%m/%y" }}</td> 
     <td>{{ shop.address }}</td> 
    </tr> 
    </tbody> 
</table> 
</div> 

.table { 
    width: 100%; 
    text-align: center; 
    justify-content: center; 
    display: flex; 
}