Post

横幅不定のブロック要素を中央・右揃え

要するに横幅を自動で設定してやるだけ。

$(function() {
  $('.left, .center, .right').each(function() {
    $(this).css({
      display: 'block',
      float: 'none',
      width: $(this).css ({ display: 'inline-block', float: 'left' }).width()
    });
  });
});

.left {
  margin-left: 0;
  margin-right: auto;
}
.center {
  margin-left: auto;
  margin-right: auto;
}
.right {
  margin-left: auto;
  margin-right: 0;
}
<ul class="left">
  <li class="center">ほげほげほげほげほげ...</li>
  <li class="center">ほげほげほげほげほげ...</li>
  <li class="center">ほげほげほげほげほげ...</li>
  <li class="center">ほげほげほげほげほげ...</li>
  <li class="center">ほげほげほげほげほげ...</li>
</ul>
<ul class="left">
  <li class="right">ほげほげほげほげほげ...</li>
  <li class="right">ほげほげほげほげほげ...</li>
  <li class="right">ほげほげほげほげほげ...</li>
  <li class="right">ほげほげほげほげほげ...</li>
  <li class="right">ほげほげほげほげほげ...</li>
</ul>
<ul class="center">
  <li>ほげほげほげほげほげ...</li>
  <li>ほげほげほげほげほげ...</li>
  <li>ほげほげほげほげほげ...</li>
  <li>ほげほげほげほげほげ...</li>
  <li>ほげほげほげほげほげ...</li>
</ul>
<ul>
  <li class="center">ほげほげほげほげほげ...</li>
  <li class="center">ほげほげほげほげほげ...</li>
  <li class="center">ほげほげほげほげほげ...</li>
  <li class="center">ほげほげほげほげほげ...</li>
  <li class="center">ほげほげほげほげほげ...</li>
</ul>
<ul class="right">
  <li>ほげほげほげほげほげ...</li>
  <li>ほげほげほげほげほげ...</li>
  <li>ほげほげほげほげほげ...</li>
  <li>ほげほげほげほげほげ...</li>
  <li>ほげほげほげほげほげ...</li>
</ul>
<ul>
  <li class="right">ほげほげほげほげほげ...</li>
  <li class="right">ほげほげほげほげほげ...</li>
  <li class="right">ほげほげほげほげほげ...</li>
  <li class="right">ほげほげほげほげほげ...</li>
  <li class="right">ほげほげほげほげほげ...</li>
</ul>

2008/11/15 11:00 | code

Categories

Archives

About

こんにちは、上山根 祐輔 (かみやまね ゆうすけ) です。東京を拠点に活動しているフリーランスのデザイナー、デベロッパー、あと何でも屋です。

というか、Fugue Icons の作者、と言ったら分かりやすいかも。