CSS 實現：圖片+文字的布局（綜合）

☊【實現要求】：圖片+文字+居中

√【實現】：

① img + 文字

<div class="demo2-1">
    <img src="" alt="logo">標題1111
</div>

普通布局

.demo2-1 {
    // 文字可用demo1中的方案一布局;
    line-height: $px;
    text-align: center;
    
    img {
    	width: $px;	// 設置圖片寬和高
    	height: $px;
    	position:relative;
    	top: $px;	// 相對於父元素，text-align: center 只會把文字居中，圖片還是置頂
    	right: $px;	// 相對於文字靠左偏移（其實relative是相對於自身本來的位置進行定位）
    }
}

② span + 文字

<div class="demo2-2">
    <span></span>標題2222
</div>

flex 布局

*align-items 會把圖片也垂直居中，而 line-height 只會把文字居中

.demo2-2 {
    // 文字可用demo1中的方案二布局;
    display: flex;	
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    
    span {
    	display: inline-block;	// 使span為塊級元素，才可以設置寬和高
    	width: $px;
    	height: $px;
    	background: url();
    	background-size: 100% 100%; // 圖片填充整個span，同 background-size: cover;
    	margin-right: 5px;     // 距右邊文字距離
    }
}

③ 文字包含在 span 中

<div class="demo2-3">
    <span>標題3333</span>
</div>

普通布局

.demo2-3 {
    // 文字可用demo1中的方案一布局;
    line-height: $px;
    text-align: center;
    
    span {
    	display: inline-block;	// 設置為塊級元素
    	background: url() no-repeat; // no-repeat: 圖片全部填充
    	background-size: 30px 30px; // 設置背景圖片的大小
    	background-position: center left; // 第一個參數垂直布局，第二個參數水平布局
    	padding-left: 35px;	// 距最左邊距離，而非距圖片距離
    }
}

---

☋【實現要求】：左右箭頭+文字

√【實現】：

<div class="demo2-4">
    標題3333
</div>

箭頭可以用 ::after 和 ::before 偽類實現

相對於父元素絕對定位

.demo2-4 {
    // 文字可用demo1中的方案一布局;
    text-align: center;
    line-height: $px;
    
    position: relative;	// 定位父元素
    
    &:after {
    	content: "";	// 內容為空
    	display: inline-block;	// 設置為塊級元素，從而設定寬和高
    	width: $px;
    	height: $px;
    	border-right: 1px solid #00f;
    	border-bottom: 1px solid #00f;
    	transform: rotate(-45deg);
    
    	position: absolute;	// 相對父元素絕對定位
    	top: $px;
    	right: $px;
    }
}

---

☊【實現要求】：左邊多行文字（寬度自適應），右邊圖標（固定寬度）

<div class="demo4-1">
    <div class="col-left">
    	<h1>大標題</h1>
    	<h2>小標題</h2>
    </div>
    <div class="col-right"></div>
</div>

√【實現】：

（移動端，flex 布局）：

.demo4-1 {
    display: flex;
    display: -webkit-flex;
    
    .col-left {	// 寬度自適應
    	flex: 1;
    	-webkit-flex: 1;
    }
    .col-right {
    	width: 100px;	// 設定寬度 
    	position: relative;	// 定位父元素
    
    	&:after {
            position: absolute;	// 相對於父元素絕對定位
            content: "";
            display: inline-block;
            width: 50px;
            height: 50px;
            border-right: 2px solid #0f0;
            border-bottom: 2px solid #0f0;
            transform: rotate(-45deg);
            top: 40px;
            right: 40px;
    	}
    }
}

---

☋【實現要求】：左邊圖片（寬度固定），中間多行文字（寬度自適應），右邊圖標（寬度固定）

<div class="demo4-2">
    <div class="col-left">
    	
    </div>
    <div class="col-middle">
    	<h1>大標題</h1>
    	<h2>小標題</h2>
    </div>
    <div class="col-right">
    	
    </div>
</div>

√【實現】：

（移動端，flex 布局）：

.demo4-2 {
    display: flex;
    display: -webkit-flex;
    
    .col-left {
    	width: 200px;	// 設定寬度
    	background: url(../img/logo.png) no-repeat;
    	background-size: 100px 100px;
    	background-position: center center;	// 定位圖片位置
    }
    .col-middle {
    	flex: 1;
    	-webkit-flex: 1;
    }
    .col-right {
    	width: 100px;	// 設定寬度 
    	position: relative;	// 定位父元素
    
    	&:after {
            position: absolute;	// 相對於父元素絕對定位
            content: "";
            display: inline-block;
            width: 50px;
            height: 50px;
            border-right: 2px solid #0f0;
            border-bottom: 2px solid #0f0;
            transform: rotate(-45deg);
            top: 40px;
            right: 40px;
    	}
    }
}