CSS中实现行内块元素对齐

目标：行内块元素实现对齐的几种方式

eg. 我希望下列两个单词文本和后面的两个图片能实现1.中线对齐2.靠右。（图1变为图2）

图1

图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。