画像を左右に並べて間に文を書く

←
「おしえないー♪」
って教えなさい！
(;｀O´)o!

→
これも秘密？
(/=｀◇´)/≪教えろー

左のこうさぎ：うさも
右のこねこ：うららちゃん

うららちゃんは、さるのこしかけのウッキさんちのこねこです。

　8/18のここの記事BlogPetうさもwithうらら　２匹deﾂｯｺ＠後姿ラブリー同盟で、BlogPetのキャプチャー画像を両サイドにして、その間に文章をセンタリングして記入しました。この方法を今後のために記録しておきます。
この書き方で、Another HTML-lint gatewayでのエラーはありませんでした。m(_ _)m

CSS編集をしない場合

<div style="text-align:center;">
<img src="左の画像URL" style="float:left;" /><img src="右の画像URL" style="float:right;" />

画像の間に書きたい文

<br style="clear:both;" /></div>

　画像タグでは、alt="画像の代わりの文字" width="幅" height="高さ"を忘れずに指定しましょう。<br style="clear:both;" />はこのタグ以降の文字の回りこみを解除するために使用します。
この記事の最初に用意した例の場合、下のように書いています。

<div style="text-align:center;"><img src="左の画像URL" alt="画像の代わりの文字" width="130" height="200" style="float:left;" /><img src="右の画像URL" alt="画像の代わりの文字" width="130" height="200" style="float:right;" /><p><span style="font-size:15px;">←
<span style="color:#007495;">「おしえないー♪」</span>
って教えなさい！(;｀O´)o! </span></p>
<p><span style="font-size:15px;">→
これも秘密？
(/=｀◇´)/≪教えろーｵｵｵ!! </span></p><br style="clear:both;" /></div>

CSS編集をする場合

CSS編集への追加

/*文字の回り込みの設定*/
.imgleft
{
float:left;
}
.imgright
{
float:right;
}
/*テキストの中央揃え*/
.textcenter
{
text-align: center;
}
/*文字の回り込みの解除*/
.clear
{
clear:both;
}

記事の書き方

<div class="textcenter"><img src="左の画像URL" alt="画像の代わりの文字" width="130" height="200" class="imgleft" /><img src="右の画像URL" alt="画像の代わりの文字" width="130" height="200" class="imgright" /><p><span style="font-size:15px;">←
<span style="color:#007495;">「おしえないー♪」</span>
って教えなさい！(;｀O´)o! </span></p>
<p><span style="font-size:15px;">→
これも秘密？
(/=｀◇´)/≪教えろーｵｵｵ!! </span></p><br class="clear" /></div>

↓　ぽちっと応援お願いします♪ m(_ _)m

↓関連記事紹介

1. 画像を左に配置してそのとなりに文字を書く。（CSS編集）
2. 画像タグのエラーを回避する。
3. HTML4.01からXHTMLへ　図形のalign属性によるWin+IEの表示の不具合を直す。
4. センタリング♪

↓　ぽちっと応援お願いします♪ m(_ _)m