CSSではてなブックマークブログパーツを中央寄せにする

以下の記事を読みました。

ankononakami.hatenablog.com

align属性じゃなくてCSSで実現した方が…と思いやってみた次第です。

リンク先からブログパーツのコードを取得

はてなブックマークブログパーツ

デザインの画面で表示。実際に設置はしていません。たしかに左側に寄っています。

CSSだと下の例のように中央寄せしたい要素をdivで囲って、さらにdivで囲うような構造にするのが一般的*1みたいです。

<div class="wrapper">
  <div class="content">
  中央寄せしたい要素
  </div>
</div>

.wrapper {width: 100%;}
.content {width: xxx; margin: 0 auto;}

しかし、いざやってみると思ったとおりに表示されず。最終的にこうなりました。

<div style="width: 200px; margin: 5px auto;">
はてなブックマークブログパーツのコード
</div>

うまくいかなかったのはブログパーツの幅*2とCSSのwidthが合っていなかったからだと思われます。デザインCSSの変更をしたくなかったのでstyleを直書きにしてあります。

こうあるべき。で考えるとCSSを使った方がいいんですが、実際にはalign属性を使ってしまう方がだいぶ簡単でした。

*1:ブロック要素の場合。テキストなどのインライン要素の場合はtext-alignを使う

*2:150px、200px、250pxから選択可。デフォルトは200px