『HTMLとCSSの小ネタ色々やんよ!!』の巻

Tweet

Pocket

CSSだけで画像を上下中央に配置する

<div><img src=”images/src.jpg”  alt=”img” width=”100″ height=”50″ /></div>

div {
      width:300px;
      height:200px;
      display:table-cell;
      text-align:center;
      vertical-align:middle;
      layout-grid-line:200px;
}
div img {
      vertical-align:middle;
 }

clearfixの指定

<div id="box" class="clearfix">
<p>test1</p>
<p>test2</p>
<p>test3</p>
</div>

.clearfix:after {
    content:"";
    display:block;
    clear:both;
}

.clearfix {
    width:100%;
}

#box p {
    width:100px;
    float:left;
}

Tweet

Pocket