图片与文字垂直居中的方法

块级元素，行内块元素及行内元素的特点

1.块级元素

块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸，是用于搭建网页布局的必须部分，使网页结构更加紧凑合理。

常用的块级元素有：<div>/<h1>~<h6>/<p>/<ul>/<table>等，其中<div>是最常用最典型的块级元素。

块级元素的特点：

（1）总是另起一行（特立独行）

（2）可以设置其宽度、高度，内外边距

（3）在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）

（4）可以容纳行内元素和其他块元素。

2.行内元素

行内元素也称为内联元素，行内元素不占有独立区域，其大小仅仅被动的依赖于自身内容的大小（例如文字和图片），所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。

常用的行内元素有<span >,<a>, ,<strong> , <em>等

行内元素的特点：

（1）总是和相邻的行内元素在同一行上（物以类聚）

（2）设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。

（3）默认宽度是他自身内容的宽度。

（4）行内元素只能容纳其他行内元素或者文本。

3.行内块元素

行内块元素综合了块元素和行内元素的不同特点,例如<img>,<input>,我们可以给他们设置宽高、对齐属性，我们把这样特殊的一类标签称为行内块元素。

行内块元素的特点：

(1)和相邻行内元素在同一行，但是之间会有空白缝隙。

(2)默认宽度是他本身内容的宽度。

(3)宽度、高度、行高、外边距以及内边距都可以手动设置。

方法1

给img设置vertical-align:middle,p设置display：inline。

但图片与文字在一行时，默认情况下，图片置顶对齐，文字置底对齐，所以通常图片高，文字低，不能水平居中对齐。

实现效果图后的全部代码

方法2

将图片和文字分别用不同的div包裹着，div是块级元素，各占一行。因此，设置div{display：inline-block}，使div在同一行，div{vertical-align:middle}。

实现的代码：

方法3

设置图片为背景图片（需已知高度，只适用于单行文字）

方法4:

将图片设置float：left，图片与文字会自动会左排列，因图片已设高度，所以设置文字的行高与图片的高度相同，文字将会与图片水平垂直居中。

实现效果后的代码：

效果前的页面

效果后的页面

图片与文字垂直居中的方法相关推荐

Vertical-align属性应用（图片和文字垂直居中对齐）
Css的vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐. 官方解释:用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效. Vert ...
css图片如何垂直居中对齐,css怎样让图片和文字垂直居中对齐
css怎样让图片和文字垂直居中对齐发布时间:2020-11-16 10:10:53 来源:亿速云阅读:99 作者:小新这篇文章主要介绍css怎样让图片和文字垂直居中对齐,文中介绍的非常详细,具有 ...
HTML 标签包含规范，规避脱标流，图片和文字垂直居中对齐，
1 标签包含规范 ◆div可以包含所有的标签. ◆p标签不能包含div h1等标签. ◆h1可以包含p,div等标签. ◆行内元素尽量包含行内元素,行内元素不要包含块元素. 2 规避脱标流 ◆尽量使用 ...
DIV或者DIV里面的图片水平与垂直居中的方法 - 站住，别跑 - 博客园
DIV或者DIV里面的图片水平与垂直居中的方法 <div class="box"><img /> </div> 水平居中的常用方式: text- ...
图片和文字对齐的方法
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 方法一. 设置各对象的vertical-align属性,属性说明: base ...
【CSS】单行图片与文字垂直居中
单行图片与文字垂直居中核心关键,是在img标签中的style属性加入vertical-align:middle;样式如果不设置的话,单行图片与文字并排的话,文字默认是底部居中的. 注意如下的代码的i ...
python图片转文字easyocr_OCR识别软件将图片转文字的具体方法
OCR识别软件将图片转文字的具体方法 OCR识别软件是一款我们经常需要使用的办公软件,如果想要将图片转换成文字,那么就需要使用这款软件进行转换,那么如何将使用OCR识别软件将首先在这里大家可以使用捷 ...
如何提取图片中文字？安利这几个图片转文字提取的方法
在我们工作学习中,有没有遇到过需要将图片中的文字信息给记录下来的情况,一般这种时候你是怎么做的呢?是根据图片手动输入吗?如果是在文字少量的情况下,可以这样操作,可是如果文字较多的话,手动输入难免会降低 ...
图片和文字垂直居中-flex布局
因为float和position用的比较熟,所以flex只是了解了一下,基本不用.但是今天发现了flex在处理图片和文字对齐方便真是超爽der~ 1.需求就是一个盒子里面,图片和文字垂直居中 2.惯 ...

图片与文字垂直居中的方法

块级元素，行内块元素及行内元素的特点

图片与文字垂直居中的方法相关推荐

最新文章

热门文章