CSSガイド EX

▼基本的なCSS、要素等について紹介しています。


【IT業界の転職】

 

コンテンツメニュー

 ◆Chapter 1

 ◆Chapter 2

 ◆Template

 ◆Tip!

 

★サイト運営者がPHPを学んだ
お勧めの書籍です!
これ一冊で基本的なPHPの仕組み、簡単なプログラムの作成、SQLiteを使ったデータベースなどかなり学べる要素が詰まっています!

↓↓↓ ↓↓↓

PHPレッスンブック―PHP5対応

新品価格
¥2,520から
(2013/2/24 04:38時点)

 

PHPが動作するサーバー

 

はじめてのHP | 無料素材 | タグ辞典 | ツールEX | PHPを学ぼう!

 

◆Chapter 2 - 縦方向を指定

vertical-align: 縦方向の位置

    top : 上をその行の上に合わせる
    middle : 中心をその行の中心に合わせる
    bottom : 下をその行の下に合わせる
    baseline : ベースラインをその行のベースラインに合わせる(初期値)
    text-top : 上をその行のフォントの上に合わせる
    text-bottom : 下をその行のフォントの下に合わせる
    super : ベースラインをその行の上付き文字の位置に合わせる
    sup : ベースラインをその行の下付き文字の位置に合わせる
    単位付きの数値 : その行のベースラインを"0"とした値の+-
    % : その行のベースラインを"0"とした行の高さに対する割合

 

vertical-alignプロパティは、指定されたインライン要素が表示される行の中で縦方向の位置を指定します。
このプロパティは、行全体の縦を指定するものではなく、指定された行の範囲で配置するものです。
なお、このプロパティでth要素またはtd要素に指定した場合には、「top」、「middle」、「bottom」は、それぞれセル内で「上」、「中心」、「下」で揃えられます。

 

【index2_17_1.html】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>縦方向を指定 - CSSガイドEX</title>
<style type="text/css">
<!--
body{ background: #ffffff; }
p{
  color:#444444;
  background: #ffffff;
  font-style: normal;
  font-size: 16pt;
}
em{
  color:red;
  background: #ffffff;
  font-style: normal;
  font-size: 16pt;
}
.vtop{ vertical-align: top; }
.vmid{ vertical-align: middle; }
.vbtm{ vertical-align: bottom; }
td{
  width: 16em;
  height: 10em;
  text-align:center;
}
-->
</style>
</head>
<body>
<p>
vertical-align
<img class="vtop" src="./sample.gif" width="80" height="80" alt="sample">
<em>top</em>
</p>

<p>
vertical-align:
<img class="vmid" src="./sample.gif" width="80" height="80" alt="サンプル画像">
<em>vertical-align: <font color="red">middle</font></em>
</p>

<p>
vertical-align:
<img src="./sample.gif" width="80" height="80" alt="サンプル画像">
<em class="vbtm">vertical-align: <font color="red">bottom</font></em>
</p>

<p>
vertical-align
<img src="./sample.gif" width="80" height="80" alt="sample">
<em class="vtop">top</em>
<em class="vbtm">bottom</em>
</p>
<table border="1">
<tr>
<td class="vtop">
<em>vertical-align: <font color="red">top</font></em>
</td>
<td class="vmid">
<em>vertical-align: <font color="red">middle</font></em>
</td>
<td class="vbtm">
<em>vertical-align: <font color="red">bottom</font></em>
</td>
</tr>
</table>
</body>
</html>

 

表示は、こちらのサンプルから確認できます。

 

 

 

 


 

忍者AdMax

 

ex-mode.net | ツールEX | 素材EX | アフィモール | 初級者向 初めてのホームページ作り | Htmlタグ辞典 | 初めてのプランター菜園 | リンク・ボード
気のみ気のままなブログ | PHPを学ぼう! | ホビ★コレ | 班長日記!

▲UP

Copyright (C) ex-mode.net 2017. All Rights Reserved.