いつも忘れて思い出すのに時間がかかるCSSテクニック集

HOME > テキストの量に関係なくボタンの位置を横と揃えるの巻

テキストの量に関係なくボタンの位置を横と揃えるの巻

よくある、枠の中に画像を上下中央配置にするやつ。
中に入れる写真のサイズがどんなんでも、枠の中央にレイアウトされる。

あああああああああああああああああああああああああああああああああああああああああああああ
詳しい内容はこちら
いいいいいいいいいいいいいいいいいいいいいいいいいい
詳しい内容はこちら
うううううううううううううう
詳しい内容はこちら

HTML

<head>
<script type="text/javascript" src="../js/heightLine.js"></script> /*ブロック要素の高さを揃えるjs*/
</head>

<div class="example10 heightLineParent clearfix"> /*jsを有効にするクラス名*/
<dl>
<dt>魏</dt>
<dd>あああああああああああああああああああああああああああああああああああああああああああああ</dd>
<dd class="btn"><a href="#"><img src="img/btn.jpg" alt="詳しい内容はこちら" width="160" height="25" /></a></dd>
</dl>
<dl>
<dt>呉</dt>
<dd>いいいいいいいいいいいいいいいいいいいいいいいいいい</dd>
<dd class="btn"><a href="#"><img src="img/btn.jpg" alt="詳しい内容はこちら" width="160" height="25" /></a></dd>
</dl>
<dl>
<dt>蜀</dt>
<dd>うううううううううううううう</dd>
<dd class="btn"><a href="#"><img src="img/btn.jpg" alt="詳しい内容はこちら" width="160" height="25" /></a></dd>
</dl>
</div>

CSS

.example10 {
  padding-top: 20px;
}
.example10 dl {
  margin-right: 30px;
  width: 200px;
  float: left;
  position: relative;
  border: 1px solid #CCC;
  padding: 10px;
}
.example10 dt {
  font-size: 1.1em;
  font-weight: bold;
  color: #F60;
  padding-bottom: 10px;
  text-align: center;
}
.example10 dd {
  color: #666666;
  font-size: 0.8em;
  padding-bottom: 40px;
}
.example10 .btn {
  padding-bottom: 0px;
  position: absolute;
  bottom: 10px;
  left: 30px;
}

今回は、ボタンを中央揃えにするためにheightLine.jsを使う必要があったけど、
左揃えであれば、CSSのみで実現することが可能。
その場合は、こちらを参考に。

↑ページトップへ

HOMEへ