[Vaster2]左に配置されてしまう画像を個別にコントロールする

自分の観測範囲だと画像の挿入の仕方によって

<div class="separator" style="clear: both; text-align: center;">~</div>

<div style="text-align: center;">~</div>

<a ~</a>

とかで画像のURLなどの情報が囲まれます。

PCの場合このままだと配置を中央揃えにしても、左配置のままで、画像が中央に配置されません。

調べるとCSSに.separatorを新しく記述して中央に配置させる方法がありました。

しかし、これですとseparatorで囲われた画像すべてが中央に配置されてしまいますし、separatorで囲われていない画像はコントロールできません。

display:inline-block;

display:inline-block;を使うとうまくいくみたいです。

やり方

img, video, objecを検索

img, video, object {
 max-width: 100%;
 height: auto;
 border: none;
 vertical-align: bottom;
 display: block;
}

そこにあるdisplay:block;をdisplay:inline-block;に変更しました。

img, video, object {
 max-width: 100%;
 height: auto;
 border: none;
 vertical-align: bottom;
 display: inline-block;
}

これで個別のコントロールが可能になりました。

偶然見つけた対策なので、これが正しいのかはわかりませんが、自分の環境ではいまのところPC、スマホとも表示などに問題はないようです。

問題が出たら

以下は未検証ですが。 画像以外で問題があるならば、img, video, objecからimgを独立して記述するとかで解決できるのではないかと思います。

img {
 max-width: 100%;
 height: auto;
 border: none;
 vertical-align: bottom;
 display: inline-block;
}

video, object {
 max-width: 100%;
 height: auto;
 border: none;
 vertical-align: bottom;
 display:block;
}

スマホの表示に問題が出た場合は、CSSレスポンシブデザインのところのimgにdisplay:block;を追加すればいいと思います。

img{
   max-width:95%;
   height:auto;
}

img{
   max-width:95%;
   height:auto;
   display:block;
}

最後に

何とかならないかとchromeの検証機能をいじっていて偶然に見つけました。 良かったら試してみてください。