CSS中實現行內塊元素對齊

目標：行內塊元素實現對齊的幾種方式
eg. 我希望下列兩個單詞文本和後面的兩個圖片能實現1.中線對齊2.靠右。（圖1變為圖2） 圖2
html:

<header>
 <p>Gmail</p>
 <p>images</p>
 <img src=images/menu.png class="menu">
 <img src=images/name.png class="name">




 </header>

從html可以看出是兩個<p>block元素和<img> inline元素構成的。所以有以下幾種方式可以實現同行且中線對齊： 1.彈性盒布局（最簡單）關鍵詞：display: flex;
功能：彈性盒布局可以使用少數幾行css實現網站幾乎所有的布局方式。空間分布方式、內容對齊方式、元素視覺順序。
特點：依賴父子關系。如果希望改變元素布局，不能在元素本身上修改css，而是在父元素修改。這裏不是在兩個<p>和<img>元素修改屬性，而要在header修改。子元素都為行內block元素。
知識點：彈性盒布局-對齊元素-居中對齊 《css權威指南》p601
css

header {
 display: flex; /*所有子元素block或inline都變成行內塊元素的樣式*/
 align-items: center; /*子元素中線居中*/
 justify-content: flex-end; /*子元素靠右*/
 }

2.邏輯簡單但步驟麻煩：display行內+float靠右+縱向對齊文本css

p, img {
 display: inline; //第一步 為元素設置行內
}
header {
 float: right; //第二步 所有的元素靠右浮動
}
p {
 margin: 0 10px 0 10px;
}




img {
 margin: 0 10px 0 10px;
 vertical-align: middle； //第三步 圖片與p文本中線居中
}

第一步：diaplay：inline；實現p和img塊元素和行內元素同一行。(圖3變圖4) 知識點：視覺格式化基礎-調整元素的顯示方式-display：inline 《css權威指南》p265
圖3

圖4
注意，雖然display: inline和 display: flex都是display屬性，但是display: inline應用於子元素，display: flex應用於父元素。比如這裏要改變p和img的位置，display: inline的選擇器是p和img本身，而display: flex的選擇器是header。
第二步：float設置header靠右 float: right; 這一步比較簡單。這時我們注意到p和img都是底線/基線baseline對齊的，不太美觀，我想要中線對齊，所以第三步。 知識點：浮動-浮動元素 《css權威指南》p484
圖4變為圖5
圖5
第三步：為img設置中線對齊 vertical-align: middle; 知識點：文本屬性-塊級對齊-縱向對齊文本-中線對齊 《css權威指南》p230

不推薦第二種方法，因為float會讓元素脫離常規的文檔流，對後面的元素的布局會有影響，比如margin。少用float。