人気ブログランキング | 話題のタグを見る

便利なhtml

こりすさんのぶろぐに
スクリプトなしで、スライダー画面ができる紹介記事がかいてあった

http://coliss.com/articles/build-websites/operation/css/css-radio-click-through-by-hornebom.html

やってみたいです

おなじく、複数行のテキストの転地左右中央ぞろえの記事もあり
こちらは引用

自分は高さ設定しておいて、
あとは100%にしておいて
marginの左右上下をautoにするけれど
こちらのほうもやってみたい

http://coliss.com/articles/build-websites/operation/css/css-vertically-center-multi-lined-text.html

<div class="area">
<div class="bubble">
<p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p>
</div>
</div>

.area {
width: 300px;
height: 300px;
background: url(../images/abe-bg.png) no-repeat;
position: relative;
}

.bubble {
position: absolute;
left: 93px;
top: 21px;
width: 135px;
height: 84px;
display: table;
}

.bubble p {
display: table-cell;
vertical-align: middle;
text-align: center;
}

<!--[if lt IE 8]>
<style>
.bubble { position: absolute; left: 93px; top: 21px; width: 135px; height: 84px; text-align: center;}
.bubble p { position: relative; font-size: 11px;
margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}
</style>
<![endif]-->
by saitolisten | 2015-02-08 06:24 | HTML・CSS