Vertical-align: the middle is centered. The line feed problem occurs in Firefox,

Vertical-align: the middle is centered. The line feed problem occurs in Firefox,
1. Understanding of vertical-align: middle

Previously, vertical-aign was widely used. In particular, the center alignment problem is often solved by using margin, padding, and so on. Recently, vertical center is often used in projects, so it is necessary to go back and summarize it.

Vertical-aign mainly uses the vertical alignment problem between the text and adjacent elements of the text, and is an inline element, that is, inline or inline-block,

If the element uses float or position: absolute, the vertical-align attribute is invalid.

　　

 

In this case, to align the image and text horizontally in the div, you can use the vertical-align: middle style for the img (instead of the text Tab !!! It is not a div tag containing img !)

(In chrome, the preview box is not aligned with the selection button, and ff is automatically aligned ).

Of course, vertical-align: middle style is also available for horizontal alignment between the image preview box and the selection button in the table.

 

2. line feed in FF list

The result of the list is as follows: <dd> float: left is used. When the number of failed numbers is small, the list can be displayed in one row, as shown below:

When there are many failed serial numbers, the list is shown below, which is out of the window range.

 

Solution:

1. In chrome, use word-break: break-all directly for <strong> (word-wrap: break-word; is invalid)

 

2. In Firefox, besides word-break: break-all, display: inline-table; (or display: inline-flex; or inline-block) is added)

Note: If the display attribute serial number is added to chrome, the line feed will be displayed.

 

 

Note: When <dd> float: left; is not used, you can directly use <strong> word-wrap: break-word;, which is valid in both chorme and ff.

 

 

 

 

Thousands of miles away