目标:行内块元素实现对齐的几种方式
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。