text-align : 가로 정렬

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
	p {
		border: 1px solid red; 
	  width : 456px;
	}
	p.ex1 {text-align : left;}
	p.ex2 {text-align : center;}
	p.ex3 {text-align : right;}
	p.ex4 {text-align : justify;}
</style>
</head>
<body>
	<p class="ex1">text-align : left</p>
	<p class="ex2">text-align : center</p>
	<p class="ex3">text-align : right</p>
	<p class="ex1">hello world!! hello world!! hello world!! hello world!! 
	hello world!! hello world!! hello world!! hello world!! 
	hello world!! hello world!! hello world!! hello world!! 
	hello world!! hello world!! hello world!! hello world!! </p>
	<p class="ex4">hello world!! hello world!! hello world!! hello world!! 
	hello world!! hello world!! hello world!! hello world!! 
	hello world!! hello world!! hello world!! hello world!! 
	hello world!! hello world!! hello world!! hello world!! </p>
</body>
</html>

vertical-align : 테이블

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
	table {
    	width : 100%;
        height : 100px;
        border-collapse: collapse;
    }
    table td {
    	border : 1px solid red;
    }
	table td:nth-child(1){
    	vertical-align : top ;
    }
    table td:nth-child(2){
    	vertical-align : middle ;
    }
    table td:nth-child(3){
    	vertical-align : bottom ;
    }
</style>
</head>
<body>
	<table>
    	<tr>
        	<td>a</td>
            <td>a</td>
            <td>a</td>
        </tr>
    </table>
</body>
</html>

vertical-align : image 위치

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
	p {
		height: 3em;
	    padding: 0 .5em;
	    font-family: monospace;
	    text-decoration: underline overline;
	    margin-left: auto;
	    margin-right: auto;
	    width: 80%;
	    border : 1px solid red;
	    font-size:20px;
	}
	p img {
		width : 15px;
	}
</style>
</head>
	<body>
	    <p>
		top:<img 
			style="vertical-align:top" 
			src="https://mdn.mozillademos.org/files/15189/star.png"/> 
		middle:<img 
			style="vertical-align:middle" 
			src="https://mdn.mozillademos.org/files/15189/star.png"/> 
		bottom:<img 
			style="vertical-align:bottom" 
			src="https://mdn.mozillademos.org/files/15189/star.png"/> 
		super:<sup>a</sup><img 
			style="vertical-align:super" 
			src="https://mdn.mozillademos.org/files/15189/star.png"/> 
		sub:<sub>a</sub><img 
			style="vertical-align:sub" 
			src="https://mdn.mozillademos.org/files/15189/star.png"/> 
		</p>
		<p>
		text-top:<img 
			style="vertical-align:text-top" 
			src="https://mdn.mozillademos.org/files/15189/star.png"/> 
		text-bottom:<img 
			style="vertical-align:text-bottom" 
			src="https://mdn.mozillademos.org/files/15189/star.png"/>
		0.2em:<img 
			style="vertical-align:0.2em" 
			src="https://mdn.mozillademos.org/files/15189/star.png"/> 
		-1em:<img 
			style="vertical-align:-1em" 
			src="https://mdn.mozillademos.org/files/15189/star.png"/>
		20%:<img 
			style="vertical-align:20%" 
			src="https://mdn.mozillademos.org/files/15189/star.png"/> 
		-100%:<img 
			style="vertical-align:-100%" 
			src="https://mdn.mozillademos.org/files/15189/star.png"/>
		</p>    
	</body>
</html>