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.
<html>
<head>
<style>
#test *{vertical-align:middle;}
</style>
<body>
<div
id="test">
<img
src="http://127.0.0.1:7001/wsc/images/message.png"/>
<span>sdfhsdhfdksfjhtes:</span>
</div>
</body>
</html>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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
