CN109960561B - 页面元素的显示方法、装置和电子设备 - Google Patents

Abstract

本发明提供了一种页面元素的显示方法、装置和电子设备；其中，该方法包括：确定指定元素的显示区域；在显示区域，以垂直居中的形式分别对齐指定元素和指定元素对应的辅助元素；其中，辅助元素与指定元素设置在同一行；辅助元素的高度与显示区域相同，辅助元素的宽度为零；显示对齐后的指定元素。本发明通过设置辅助元素可以实现指定元素在显示区域稳定的垂直居中对齐，适用于大多数的浏览器，应用范围广泛；另外，在显示过程中无需计算元素的宽度和高度，并不占用终端内存，因而有利于提高页面的显示性能，提升用户体验度。

Description

页面元素的显示方法、装置和电子设备

技术领域

本发明涉及页面显示技术领域，尤其是涉及一种页面元素的显示方法、装置和电子设备。

背景技术

在页面显示中，需要部分元素居中显示，以满足业务需求。相关技术中，可以通过CSS3(Cascading Style Sheets Level 3，层叠样式表3级)或JavaScript实现元素的居中；但CSS3的实现方式难以兼容低端浏览器，使得该方式应用范围受限；而JavaScript的实现方式需要实时计算元素的宽度和高度，基于计算结果控制元素居中，上述实时计算的过程需要消耗较大的资源，当终端内存紧张时容易导致页面卡顿，影响用户体验度。

发明内容

有鉴于此，本发明的目的在于提供一种页面元素的显示方法、装置和电子设备，以使元素在大多数的浏览器下实现稳定的垂直居中对齐，且降低内存消耗，提高页面的显示性能，提升用户体验度。

第一方面，本发明实施例提供了一种页面元素的显示方法，该方法包括：确定指定元素的显示区域；在显示区域，以垂直居中的形式分别对齐指定元素和指定元素对应的辅助元素；其中，辅助元素与指定元素设置在同一行；辅助元素的高度与显示区域相同，辅助元素的宽度为零；显示对齐后的指定元素。

在本发明较佳的实施例中，上述确定指定元素的显示区域的步骤，包括：查找指定元素的位置属性；如果位置属性为固定属性，确定指定元素的显示区域为浏览器的页面区域；如果位置属性为绝对属性，确定指定元素的显示区域为指定元素对应的父元素的元素区域。

在本发明较佳的实施例中，上述以垂直居中的形式分别对齐指定元素和指定元素对应的辅助元素的步骤，包括：确定指定元素是否存在辅助元素；如果存在辅助元素，分别设置指定元素和辅助元素的垂直对齐属性为居中，以使指定元素和辅助元素均相对于显示区域垂直居中对齐。

在本发明较佳的实施例中，上述确定指定元素是否存在辅助元素的步骤，包括：在显示区域中，查找是否存在指定元素的兄弟元素；如果存在，判断指定元素和兄弟元素的显示属性是否均为行内块元素显示；如果是，判断兄弟元素是否满足预设条件；预设条件为元素高度与显示区域相同，且元素宽度为零；如果满足，将兄弟元素确定为指定元素的辅助元素。

在本发明较佳的实施例中，上述显示对齐后的指定元素的步骤，包括：获取指定元素的元素内容尺寸；根据元素内容尺寸以及预设的容器宽度，确定指定元素对应的容器长度；根据容器宽度和容器长度，确定显示指定元素的容器区域；在容器区域中显示指定元素。

第二方面，本发明实施例提供了一种页面元素的显示装置，该装置包括：区域确定模块，用于确定指定元素的显示区域；元素对齐模块，用于在显示区域，以垂直居中的形式分别对齐指定元素和指定元素对应的辅助元素；其中，辅助元素与指定元素设置在同一行；辅助元素的高度与显示区域相同，辅助元素的宽度为零；元素显示模块，用于显示对齐后的指定元素。

在本发明较佳的实施例中，上述区域确定模块，用于：查找指定元素的位置属性；如果位置属性为固定属性，确定指定元素的显示区域为浏览器的页面区域；如果位置属性为绝对属性，确定指定元素的显示区域为指定元素对应的父元素的元素区域。

在本发明较佳的实施例中，上述元素对齐模块，用于：确定指定元素是否存在辅助元素；如果存在辅助元素，分别设置指定元素和辅助元素的垂直对齐属性为居中，以使指定元素和辅助元素均相对于显示区域垂直居中对齐。

在本发明较佳的实施例中，上述元素对齐模块，用于：在显示区域中，查找是否存在指定元素的兄弟元素；如果存在，判断指定元素和兄弟元素的显示属性是否均为行内块元素显示；如果是，判断兄弟元素是否满足预设条件；预设条件为元素高度与显示区域相同，且元素宽度为零；如果满足，将兄弟元素确定为指定元素的辅助元素。

在本发明较佳的实施例中，上述元素显示模块，用于：获取指定元素的元素内容尺寸；根据元素内容尺寸以及预设的容器宽度，确定指定元素对应的容器长度；根据容器宽度和容器长度，确定显示指定元素的容器区域；在容器区域中显示指定元素。

第三方面，本发明实施例提供了一种终端设备，包括处理器和存储器，存储器存储有能够被处理器执行的机器可执行指令，处理器执行机器可执行指令以实现上述页面元素的显示方法。

第四方面，本发明实施例提供了一种机器可读存储介质，该机器可读存储介质存储有机器可执行指令，该机器可执行指令在被处理器调用和执行时，机器可执行指令促使处理器实现上述页面元素的显示方法。

本发明实施例带来了以下有益效果：

本发明实施例提供的一种页面元素的显示方法、装置和电子设备，确定了指定元素的显示区域后，在该显示区域中以垂直居中的形式分别对齐指定元素和指定元素对应的辅助元素；进而显示对齐后的指定元素；其中，辅助元素与指定元素设置在同一行，其高度与显示区域相同，宽度为零，因而显示区域中不显示该辅助元素；该方式中，通过设置辅助元素可以实现指定元素在显示区域稳定的垂直居中对齐，适用于大多数的浏览器，应用范围广泛；另外，在显示过程中无需计算元素的宽度和高度，并不占用终端内存，因而有利于提高页面的显示性能，提升用户体验度。

本发明的其他特征和优点将在随后的说明书中阐述，或者，部分特征和优点可以从说明书推知或毫无疑义地确定，或者通过实施本发明的上述技术即可得知。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施方式，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种页面元素的显示方法的流程图；

图2为本发明实施例提供的另一种页面元素的显示方法的流程图；

图3为本发明实施例提供的另一种页面元素的显示方法的流程图；

图4为本发明实施例提供的另一种页面元素的显示方法的流程图；

图5为本发明实施例提供的一种页面元素的显示方法的示意图；

图6为本发明实施例提供的一种页面元素的显示装置的结构示意图；

图7为本发明实施例提供的一种终端设备的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

相关技术中，主要存在两种实现元素的居中的方式。其中一种方式通过CSS3实现，该方式中，首先将元素的容器设置为绝对定位，再设置容器距离显示区域的左边缘为显示区域宽度的50％，容器距离显示区域的上边缘为显示区域高度的50％，进而再将容器向左移动容器宽度的50％，向上移动容器高度的50％，至此，该元素在显示区域居中显示。但是该方式是通过CSS3实现的，部分低端浏览器(如IE6浏览器)不能识别CSS3中的部分属性，因而不能兼容CSS3，导致该居中方式仅适用于能够兼容CSS3的浏览器，应用范围有限。

另一种方式可以通过JavaScript实现，由于元素的内容可能会不断变化，JavaScript需要实时计算元素的宽度和高度，得到计算结果后，与上述CSS3的实现方式类似，将元素的容器设置为绝对定位，再设置容器距离显示区域的左边缘为显示区域宽度的50％，容器距离显示区域的上边缘为显示区域高度的50％，进而再将容器向左移动容器宽度的50％，向上移动容器高度的50％，至此，该元素在显示区域居中显示。由于该方式需要终端设备的处理器实时计算元素的宽度和高度，会消耗终端设备的内存，当内存紧张时容易导致页面卡顿，从而降低了页面显示性能，影响了用户体验度。

基于上述问题，本发明实施例提供的一种页面元素的显示方法、装置和终端设备，该技术可以应用于手机、平板电脑、计算机、专用终端等终端设备上，可以用于APP(Application，应用程序)页面、网页页面、操作系统页面等场景中。

为便于对本实施例进行理解，首先对本发明实施例所公开的一种页面元素的显示方法进行详细介绍，该方法可以应用于多种终端设备；如图1所示，该方法包括如下步骤：

步骤S102，确定指定元素的显示区域。

指定元素的显示区域可以预先设置，具体可以通过指定元素的显示属性、位置属性等进行设置。指定元素的显示区域具体可以为浏览器的页面区域，也可以为浏览器的页面区域中的某一局部区域。

步骤S104，在显示区域，以垂直居中的形式分别对齐指定元素和指定元素对应的辅助元素；其中，辅助元素与指定元素设置在同一行；辅助元素的高度与显示区域相同，辅助元素的宽度为零。

步骤S106，显示对齐后的指定元素。

在部分浏览器中，以垂直居中的形式对齐指定元素，即可实现指定元素垂直居中显示在显示区域。但是，对于某些浏览器，受浏览器特性的影响，并不能稳定地实现指定元素的垂直居中对齐。基于此，本实施例中预先为指定元素设置辅助元素；该辅助元素与指定元素设置在同一行，但辅助元素和指定原点的宽度和高度可以分别设置，相互不受影响；其中，辅助元素的高度与显示区域相同，但宽度为零，因而在页面上不会显示该辅助元素；指定元素的宽度可以基于预设的宽度百分比以及显示区域的宽度设置，指定元素的高度可以为固定值，也可以基于预设的高度百分比以及显示区域的高度设置，当然也可以基于元素内容长度设置。需要说明的是，辅助元素和指定元素分别相对于显示区域垂直居中对齐，二者之间不具有相对的对齐关系。

本发明实施例提供的一种页面元素的显示方法，确定了指定元素的显示区域后，在该显示区域中以垂直居中的形式分别对齐指定元素和指定元素对应的辅助元素；进而显示对齐后的指定元素；其中，辅助元素与指定元素设置在同一行，其高度与显示区域相同，宽度为零，因而显示区域中不显示该辅助元素；通过该方式，通过设置辅助元素可以实现指定元素在显示区域稳定的垂直居中对齐，适用于大多数的浏览器，应用范围广泛；另外，在显示过程中无需计算元素的宽度和高度，并不占用终端内存，因而有利于提高页面的显示性能，提升用户体验度。

本发明实施例还提供另一种页面元素的显示方法，该方法在上述实施例所述方法的基础上实现；该方法重点描述确定指定元素的显示区域的具体实现方式。如图2所示，该方法包括如下步骤：

步骤S202，查找指定元素的位置属性；如果该位置属性为固定属性，执行步骤S204；如果该位置属性为绝对属性，执行步骤S206。

指定元素的位置属性可以根据页面设计需求预先设置；指定元素的位置属性可以设置为多种不同的属性，如固定属性、绝对属性、相对属性、默认属性、继承属性等等；其中，如果指定元素的位置属性为固定属性，则该指定元素需要相对于浏览器的页面区域进行定位，通过该固定属性，可以将该指定元素设置在浏览器的页面区域的顶部、底部、左侧、右侧等位置。如果指定元素的位置属性为绝对属性，则该指定元素需要相对于该指定元素的外部的第一个父元素(也可以称为与指定元素相邻的父元素)进行定位，通过该绝对属性，可以将该指定元素设置在父元素对应区域的顶部、底部、左侧、右侧等位置。

在HTML(HyperText Markup Language，超级文本标记语言)语言中，指定元素的位置属性具体可以通过CSS中的position命令实现；如果指定元素中的position命令的命令值为fixed，则该指定元素的位置属性为固定属性，如果指定元素中的position命令的命令值为absolute，则该指定元素的位置属性为绝对属性。

步骤S204，确定指定元素的显示区域为浏览器的页面区域；执行步骤S208。

该浏览器的页面区域也可以称为浏览器的窗口区域，即用户浏览网页页面的区域。

步骤S206，确定指定元素的显示区域为指定元素对应的父元素的元素区域。

通常，指定元素对应的标签包含在父元素的标签中；具体可以通过parent()或parents()命令查询当前指定元素的父元素。

步骤S208，在显示区域，以垂直居中的形式分别对齐指定元素和指定元素对应的辅助元素；其中，辅助元素与指定元素设置在同一行；辅助元素的高度与显示区域相同，辅助元素的宽度为零。

步骤S210，显示对齐后的指定元素。

在实际实现时，如果指定元素为弹出广告、咨询窗口等，该指定元素通常相对于浏览器的页面区域垂直居中；如果指定元素为签名信息、局部图片等，该实现元素相对于局部区域垂直居中，该局部区域可以即为指定元素的父元素对应的区域。

上述方式中，通过指定元素的位置属性，确定该指定元素的显示区域，进而在该显示区域中以垂直居中的形式分别对齐指定元素和指定元素对应的辅助元素；再显示对齐后的指定元素；该方式通过设置辅助元素可以实现指定元素在显示区域稳定的垂直居中对齐，适用于大多数的浏览器，应用范围广泛；另外，在显示过程中无需计算元素的宽度和高度，并不占用终端内存，因而有利于提高页面的显示性能，提升用户体验度。

本发明实施例还提供另一种页面元素的显示方法，该方法在上述实施例所述方法的基础上实现；该方法重点描述指定元素和辅助元素的对齐方式；如图3所示，该方法包括如下步骤：

步骤S302，查找指定元素的位置属性；如果该位置属性为固定属性，执行步骤S304；如果该位置属性为绝对属性，执行步骤S306；

步骤S304，确定指定元素的显示区域为浏览器的页面区域；执行步骤S308；

步骤S306，确定指定元素的显示区域为指定元素对应的父元素的元素区域。

本实施例中，在确定了指定元素的显示区域后，需要先确定该指定元素是否存在辅助元素，进而再分别对齐指定元素和辅助元素；如果该指定元素不存在辅助元素，则单独对齐指定元素，具体描述如下。

步骤S308，在显示区域中，查找是否存在指定元素的兄弟元素；如果存在，执行步骤S310；如果不存在，执行步骤S318；

指定元素的兄弟元素可以理解为与指定元素位于同一个父元素下的其他元素；指定元素与兄弟元素间相互并列，彼此的标签不存在重合、也不存在包含与被包含的关系；具体可以通过siblings()或其他jQuery语句寻找指定元素的兄弟元素。

步骤S310，判断指定元素和兄弟元素的显示属性是否均为行内块元素显示；如果是，执行步骤S312；如果否，执行步骤S318；

指定元素和该指定元素的兄弟元素均可以设置对应的显示属性，元素的显示属性可以设置为多种不同的属性，如内联元素显示、块级元素显示和行内块元素显示；其中，内联元素显示可以使多个元素设置在同一行，但该行内的每个元素的宽度和高度不能分别设置，均为默认值；块级元素显示可以使每个元素单独占据一行，且每个元素的单独和高度分别设置；行内块元素显示可以使多个元素设置在一行显示，且该行内的每个元素的宽度和高度可以分别设置。

由于本实施例中指定元素的宽度和高度可能需要根据元素内容设置，而辅助元素的高度与显示区域相同，宽度为零，因而二者的宽度和高度不能采用默认值，并且指定元素和辅助元素需要设置在同一行，因此，需要设置指定元素和辅助元素的显示属性均为行内块元素显示。在实际实现时，可以采用命令“display:inline-block”设置元素的显示属性为行内块元素显示。

步骤S312，判断该兄弟元素是否满足预设条件；该预设条件为元素高度与显示区域相同，且元素宽度为零；如果满足，执行步骤S314；如果不满足，执行步骤S318；

在为指定元素或者兄弟元素设置宽度和高度时，可以直接设置固定的宽度和高度值，如命令“width:500px；height:200px”可以将元素的宽度设置为500像素，高度设置为200像素。另一种实现方式中，可以以百分比的形式设置元素的宽度和高度，如命令“width:100％；height:100％”可以将元素的宽度和高度设置为该元素的父元素的宽度和高度；例如，如果该元素的父元素的宽度为500像素，高度为200，则该元素的宽度也为500像素，高度为200。再如命令“width:100％；height:50％”可以将元素的宽度设置为该元素的父元素的宽度，高度设置为该元素的父元素的高度的一半。

具体到上述步骤S312中，如果该兄弟元素标签中，设置宽度和高度的命令为“width:0％；height:100％”或者“height:100％”，则可以确定该兄弟元素的高度与该兄弟元素的父元素相同，即该兄弟元素的高度与显示区域的高度相同，且宽度为零，此时即可确定该兄弟元素为辅助元素。另一种方式中，如果该兄弟元素标签中，宽度和高度设置为固定值，则需要将高度值与父元素的高度值进行比较，如果二者相同，且该兄弟元素的宽度值为零，也可以确定该兄弟元素为辅助元素。

需要说明的是，如果指定元素的显示区域为浏览器的页面区域，则可以将页面区域作为指定元素的父元素对应的区域，以设置指定元素和兄弟元素的宽度和高度；也可以将指定元素和兄弟元素的父元素的区域设置为填充整个页面，进而再基于该父元素设置指定元素和兄弟元素的宽度和高度。

如果该兄弟元素不满足上述预设条件，说明该兄弟元素不是辅助元素，而是需要正常显示的普通元素，此时，按照该兄弟元素的宽度和高度显示该兄弟元素即可。

步骤S314，将该兄弟元素确定为指定元素的辅助元素。

如果指定元素存在多个兄弟元素，可以针对每个兄弟元素，逐一执行上述步骤S310-步骤S314，以从多个兄弟元素中筛选出辅助元素。

步骤S316，分别设置指定元素和辅助元素的垂直对齐属性为居中，以使指定元素和辅助元素均相对于显示区域垂直居中对齐；执行步骤S320。

具体可以通过CSS中的vertical-align命令设置元素的垂青对齐属性；该垂直对齐属性可以设置多种属性值，如垂直对齐父元素的基线、对齐父元素字体的顶端、对齐父元素的中部、对齐父元素的底端等等。当vertical-align的属性值为middle时，即可将元素对齐父元素的中部，即该相对于父元素居中对齐。在上述指定元素和辅助元素对应的标签中，均设置“vertical-align:middle”，即可分别使指定元素和辅助元素均相对于显示区域垂直居中对齐。

需要说明的是，如果指定元素的显示区域为浏览器的页面区域，则可以将页面区域作为指定元素的父元素对应的区域，以设置指定元素和辅助元素均相对于该区域垂直居中对齐；也可以将指定元素和兄弟元素的父元素的区域设置为填充整个页面，进而再设置指定元素和辅助元素均相对于该父元素对应的区域垂直居中对齐。

步骤S318，设置指定元素的垂直对齐属性为居中，以使指定元素相对于显示区域垂直居中对齐。

步骤S320，显示对齐后的指定元素。

上述方式中，通过指定元素的位置属性，确定该指定元素的显示区域，进而在该显示区域查找指定元素的兄弟元素，将行内块元素显示且满足预设条件的兄弟元素确定为辅助元素，进而以垂直居中的形式分别对齐指定元素和指定元素对应的辅助元素；最后显示对齐后的指定元素；该方式中，行内块元素显示以及垂直对齐属性的设置均采用CSS2中的相关命令，几乎所有的浏览器都可以识别CSS2命令，因此该方式可以适用于大多数的浏览器，应用范围广泛；另外，在显示过程中无需计算元素的宽度和高度，并不占用终端内存，因而有利于提高页面的显示性能，提升用户体验度。

本发明实施例还提供另一种页面元素的显示方法，该方法在上述实施例所述方法的基础上实现；该方法重点描述显示对齐后的指定元素的具体实现方式；如图4所示，该方法包括如下步骤：

步骤S402，查找指定元素的位置属性；如果该位置属性为固定属性，执行步骤S404；如果该位置属性为绝对属性，执行步骤S406；

步骤S404，确定指定元素的显示区域为浏览器的页面区域；执行步骤S408；

步骤S406，确定指定元素的显示区域为指定元素对应的父元素的元素区域。

步骤S408，在显示区域中，查找是否存在指定元素的兄弟元素；如果存在，执行步骤S410；如果不存在，执行步骤S418；

步骤S410，判断指定元素和兄弟元素的显示属性是否均为行内块元素显示；如果是，执行步骤S412；如果否，执行步骤S418；

步骤S412，判断该兄弟元素是否满足预设条件；该预设条件为元素高度与显示区域相同，且元素宽度为零；如果满足，执行步骤S414；如果不满足，执行步骤S418；

步骤S414，将该兄弟元素确定为指定元素的辅助元素。

步骤S416，分别设置指定元素和辅助元素的垂直对齐属性为居中，以使指定元素和辅助元素均相对于显示区域垂直居中对齐；执行步骤S420。

步骤S418，设置指定元素的垂直对齐属性为居中，以使指定元素相对于显示区域垂直居中对齐。

步骤S420，获取指定元素的元素内容尺寸；

如果该指定元素为文字，该元素内容尺寸包含文字长度、文字字号、行间距等；如果该指定元素为图片，该元素内容尺寸通常为该图片的长度和宽度等。

步骤S422，根据元素内容尺寸以及预设的容器宽度，确定指定元素对应的容器长度；

指定元素通常通过容器进行显示，该容器也可以理解为显示指定元素的区域。指定元素的容器宽度可以为固定值，也可以为相对于显示区域宽度的固定的百分比。由于页面内容不断更新，指定元素中的元素内容尺寸也会变化，且指定元素的容器宽度相对固定，因而指定元素对应的容器长度通常随着指定元素的元素内容尺寸变化而变化。

步骤S424，根据容器宽度和容器长度，确定显示指定元素的容器区域；

由于指定元素经上述步骤处理后，始终相对于显示区域垂直居中对齐，因而当指定元素的容器宽度和容器长度确定后，即可确定该指定元素的容器区域，具体可以通过该容器区域的四个边界距离显示区域的对应边界的距离表征该指定元素的容器区域；例如，容器区域的上边界与显示区域的上边界的距离、容器区域的下边界与显示区域的下边界的距离、容器区域的左边界与显示区域的左边界的距离、以及容器区域的右边界与显示区域的右边界的距离。

步骤S426，在该容器区域中显示指定元素。

为了进一步理解，图5所示为一种页面元素的显示方法的示意图；图5中，辅助元素为虚线所示，由于辅助元素的宽度为零，因而在实际页面中不显示该辅助元素；辅助元素与显示区域的高度相同；该辅助元素与指定元素分别相对于显示区域垂直居中对齐；显示区域的高度可以为指定元素的元素内容尺寸而变化，但始终处于显示区域的垂直居中位置。

上述方式中，分别设置指定元素和辅助元素的垂直对齐属性为居中后，即可根据指定元素的元素内容尺寸和预设的容器宽度，确定指定元素的容器长度，进而得到指定元素的容器区域，最终在该容器区域上显示该指定元素。该方式应用CSS的低版本命令即可实现元素的垂直居中对齐，可以适用于大多数的浏览器，应用范围广泛；另外，在显示过程中无需计算元素的宽度和高度，并不占用终端内存，因而有利于提高页面的显示性能，提升用户体验度。

需要说明的是，上述各方法实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

对应于上述方法实施例，本发明实施例提供了一种页面元素的显示装置，如图6所示，该装置包括：

区域确定模块60，用于确定指定元素的显示区域；

元素对齐模块61，用于在显示区域，以垂直居中的形式分别对齐指定元素和指定元素对应的辅助元素；其中，辅助元素与指定元素设置在同一行；辅助元素的高度与显示区域相同，辅助元素的宽度为零；

元素显示模块62，用于显示对齐后的指定元素。

本发明实施例提供的一种页面元素的显示装置，确定了指定元素的显示区域后，在该显示区域中以垂直居中的形式分别对齐指定元素和指定元素对应的辅助元素；进而显示对齐后的指定元素；其中，辅助元素与指定元素设置在同一行，其高度与显示区域相同，宽度为零，因而显示区域中不显示该辅助元素；通过该方式，通过设置辅助元素可以实现指定元素在显示区域稳定的垂直居中对齐，适用于大多数的浏览器，应用范围广泛；另外，在显示过程中无需计算元素的宽度和高度，并不占用终端内存，因而有利于提高页面的显示性能，提升用户体验度。

在一些实施例中，上述区域确定模块，用于：查找指定元素的位置属性；如果位置属性为固定属性，确定指定元素的显示区域为浏览器的页面区域；如果位置属性为绝对属性，确定指定元素的显示区域为指定元素对应的父元素的元素区域。

在一些实施例中，上述元素对齐模块，用于：确定指定元素是否存在辅助元素；如果存在辅助元素，分别设置指定元素和辅助元素的垂直对齐属性为居中，以使指定元素和辅助元素均相对于显示区域垂直居中对齐。

在一些实施例中，上述元素对齐模块，用于：在显示区域中，查找是否存在指定元素的兄弟元素；如果存在，判断指定元素和兄弟元素的显示属性是否均为行内块元素显示；如果是，判断兄弟元素是否满足预设条件；预设条件为元素高度与显示区域相同，且元素宽度为零；如果满足，将兄弟元素确定为指定元素的辅助元素。

在一些实施例中，上述元素显示模块，用于：获取指定元素的元素内容尺寸；根据元素内容尺寸以及预设的容器宽度，确定指定元素对应的容器长度；根据容器宽度和容器长度，确定显示指定元素的容器区域；在容器区域中显示指定元素。

本发明实施例所提供的页面元素的显示装置，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。

本发明实施例还提供了一种终端设备，用于运行上述页面元素的显示方法；参见图7所示，该终端设备包括存储器100和处理器101，其中，存储器100用于存储一条或多条计算机指令，一条或多条计算机指令被处理器101执行，以实现上述页面元素的显示方法。

进一步地，图7所示的终端设备还包括总线102和通信接口103，处理器101、通信接口103和存储器100通过总线102连接。

其中，存储器100可能包含高速随机存取存储器(RAM，Random Access Memory)，也可能还包括非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。通过至少一个通信接口103(可以是有线或者无线)实现该系统网元与至少一个其他网元之间的通信连接，可以使用互联网，广域网，本地网，城域网等。总线102可以是ISA总线、PCI总线或EISA总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图7中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

处理器101可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器101中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器101可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(DigitalSignal Processing，简称DSP)、专用集成电路(Application Specific IntegratedCircuit，简称ASIC)、现成可编程门阵列(Field-Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本发明实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器100，处理器101读取存储器100中的信息，结合其硬件完成前述实施例的方法的步骤。

本发明实施例还提供了一种机器可读存储介质，该机器可读存储介质存储有机器可执行指令，该机器可执行指令在被处理器调用和执行时，机器可执行指令促使处理器实现上述页面元素的显示方法，具体实现可参见方法实施例，在此不再赘述。

本发明实施例所提供的页面元素的显示方法、装置和电子设备的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行前面方法实施例中所述的方法，具体实现可参见方法实施例，在此不再赘述。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (10)

1.一种页面元素的显示方法，其特征在于，所述方法包括：

确定指定元素的显示区域；

在所述显示区域，以垂直居中的形式分别对齐所述指定元素和所述指定元素对应的辅助元素；其中，所述辅助元素与所述指定元素设置在同一行；所述辅助元素的高度与所述显示区域相同，所述辅助元素的宽度为零；

显示对齐后的所述指定元素的步骤，包括：

获取所述指定元素的元素内容尺寸；

根据所述元素内容尺寸以及预设的容器宽度，确定所述指定元素对应的容器长度；

根据所述容器宽度和所述容器长度，确定显示所述指定元素的容器区域；

在所述容器区域中显示所述指定元素。

2.根据权利要求1所述的方法，其特征在于，确定指定元素的显示区域的步骤，包括：

查找所述指定元素的位置属性；

如果所述位置属性为固定属性，确定所述指定元素的显示区域为浏览器的页面区域；

如果所述位置属性为绝对属性，确定所述指定元素的显示区域为所述指定元素对应的父元素的元素区域。

3.根据权利要求1所述的方法，其特征在于，以垂直居中的形式分别对齐所述指定元素和所述指定元素对应的辅助元素的步骤，包括：

确定所述指定元素是否存在辅助元素；

如果存在辅助元素，分别设置所述指定元素和所述辅助元素的垂直对齐属性为居中，以使所述指定元素和所述辅助元素均相对于所述显示区域垂直居中对齐。

4.根据权利要求3所述的方法，其特征在于，确定所述指定元素是否存在辅助元素的步骤，包括：

在所述显示区域中，查找是否存在所述指定元素的兄弟元素；

如果存在，判断所述指定元素和所述兄弟元素的显示属性是否均为行内块元素显示；

如果是，判断所述兄弟元素是否满足预设条件；所述预设条件为元素高度与所述显示区域相同，且元素宽度为零；

如果满足，将所述兄弟元素确定为所述指定元素的辅助元素。

5.一种页面元素的显示装置，其特征在于，所述装置包括：

区域确定模块，用于确定指定元素的显示区域；

元素对齐模块，用于在所述显示区域，以垂直居中的形式分别对齐所述指定元素和所述指定元素对应的辅助元素；其中，所述辅助元素与所述指定元素设置在同一行；所述辅助元素的高度与所述显示区域相同，所述辅助元素的宽度为零；

元素显示模块，用于显示对齐后的所述指定元素；

所述元素显示模块，用于获取所述指定元素的元素内容尺寸；根据所述元素内容尺寸以及预设的容器宽度，确定所述指定元素对应的容器长度；根据所述容器宽度和所述容器长度，确定显示所述指定元素的容器区域；在所述容器区域中显示所述指定元素。

6.根据权利要求5所述的装置，其特征在于，所述区域确定模块，用于：

查找所述指定元素的位置属性；

如果所述位置属性为固定属性，确定所述指定元素的显示区域为浏览器的页面区域；

如果所述位置属性为绝对属性，确定所述指定元素的显示区域为所述指定元素对应的父元素的元素区域。

7.根据权利要求5所述的装置，其特征在于，所述元素对齐模块，用于：

确定所述指定元素是否存在辅助元素；

如果存在辅助元素，分别设置所述指定元素和所述辅助元素的垂直对齐属性为居中，以使所述指定元素和所述辅助元素均相对于所述显示区域垂直居中对齐。

8.根据权利要求7所述的装置，其特征在于，所述元素对齐模块，用于：

在所述显示区域中，查找是否存在所述指定元素的兄弟元素；

如果存在，判断所述指定元素和所述兄弟元素的显示属性是否均为行内块元素显示；

如果是，判断所述兄弟元素是否满足预设条件；所述预设条件为元素高度与所述显示区域相同，且元素宽度为零；

如果满足，将所述兄弟元素确定为所述指定元素的辅助元素。

9.一种终端设备，其特征在于，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的机器可执行指令，所述处理器执行所述机器可执行指令以实现权利要求1至4任一项所述的页面元素的显示方法。

10.一种机器可读存储介质，其特征在于，该机器可读存储介质存储有机器可执行指令，该机器可执行指令在被处理器调用和执行时，机器可执行指令促使处理器实现权利要求1至4任一项所述的页面元素的显示方法。

Images