How can I make img and span vertically centered in a div?

This time I will show you how to vertically center img and span in a div. What are the precautions for vertically centering img and span in a div? The following is a practical case, let's take a look.

  
  
  
  
  
  
sdfhsdhfdksfjhtes:  
  
  

Please note: #test *{vertical-align:middle;}s

#test * represents all elements in the div, including inline elements such as span, input, and img. .

vertical-align
Initial value: baseline (default value)
Can be inherited: No
Applicable to: Inline elements
Description: vertical-align:baseline makes the element The baseline is aligned with the baseline of the parent element.
Warning: vertical-align cannot affect the alignment of content in table cells, and the same is true for content in block elements.

Please note: vertical-align only affects inline elements, such as span, img, em, input, a, etc., but is invalid for block elements such as div, h3, p, etc.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use h5’s sse server to send EventSource events

H5’s local storage and local database details Introduction

Use H5 and C3 to achieve a simple clock effect

The above is the detailed content of How can I make img and span vertically centered in a div?. For more information, please follow other related articles on the PHP Chinese website!