文字与箭头对齐的多种实现方式

直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.clearfix::after {
			content: ".";
			visibility: hidden;
			display: block;
			height: 0;
			clear: both;
		}
		
		.fl {
			float: left;
		}

		.black {
			 100%;
			height: 26px;
			background-color: rgb(51, 51, 51);
		}

		.grey {
			 100%;
			height: 38px;
			background-color: #f8f8f8;
			border-bottom: 1px solid grey;
		}

		.arrow1 {
			 0;
			height: 0;
			border- 4px;
			border-color: #999 transparent transparent transparent;
			border-style: solid;
			border-bottom: none;
			font-size: 0; /* 必须设置 */
			display: inline-block;
			/*
		   	 本身是inline元素，那么对齐的是文本的中线
		 	 设置为inline-block，那么对齐的就是文本的基线，而基线是英文字母x的下端沿。
			 设置为inline-block, 可以使用margin-top和margin-bottom了。
			*/

			/*
			 vertical-align适用于inline和inline-block和table-cell元素
			*/
			vertical-align: middle;
		}

		.outer1 {
			 50px;
			height: 26px;
			padding: 0 13px 0 20px;
			font-size: 12px;
			text-align: left;
			line-height: 26px;
			/* 
		   	 line-height: 100%;是针对12px;
			 line-height: 1.5;也是针对12px;
			 line-height: 26px; 文字居中了;
			 line-height: 1.5em; 也是相对于12px;
			*/
		}

		.a {
			color: #fff;
			text-decoration: none;
		}

		.outer2 {
			height: 39px;
			line-height: 39px;
			padding: 0 14px;
			position: relative;
		}

		.outer2 a {
			color: #666;
			font-size: 12px;
			float: left; /*为什么这里一定要浮动呢？如果不浮动的画，就要为outer2设置宽度将em包括进去, 但是我还是不知道*/
		}

		.arrow2 {
			height: 39px;
			float: left;  /* 一定要浮动 */
			position: relative;
			margin: 0 0 0 4px;
			 6px;
			cursor: pointer;
		}


		/*采用的绝对定位*/
		.arrow2 span {
			position: absolute;
			top: 18px;
			height: 0;
			 0;
			border- 3px;
			border-color: #404040 transparent transparent transparent;
			border-style: solid;
		}

		.jd {
			 100%;
			height: 30px;
			line-height: 30px;
			background-color: #e3e4e5;
			font-size: 12px;
		}

		.outer3 {
			height: 28px;
			line-height: 28px;
			padding-left: 7px;
			padding-right: 20px;
			position: relative;
		}
		.outer3 a {
			color: #999;
		}

		.arrow3 {
			position: absolute; /*采用绝对定位*/
			right: 5px;
			top: 13px;
			height: 0;
			 0;
			border- 3px;
			border-color: #404040 transparent transparent transparent;
			border-style: solid;
			font-size: 0;
		}

		



	</style>
</head>
<body>
	<div class="black clearfix">
		<div class="outer1 fl">
			<a class="a" href="#">
				唯品会
				<em class="arrow1"></em>
			</a>
		</div>
	</div>


	<div class="grey clearfix">
		<div class="outer2 fl">
			<a class="a" href="#">淘宝</a>
			<em class="arrow2">
				<span></span>
			</em>
		</div>
	</div>

	<div class="jd clearfix">
		<div class="outer3 fl">
			<a class="a" href="#">我的京东</a>
			<em class="arrow3"></em>
		</div>
	</div>

</body>
</html>