简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

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

php中世界最好的语言
Release： 2018-01-20 09:59:13
Original
7434 people have browsed it

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>
Copy after login

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!

Related labels：
span vertical
source：php.cn
Previous article：A brief discussion on the techniques of using HTML empty links Next article：How to implement input box prompt + normal text box prompt in h5
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Javascript event delegate with unknown selector and children I have a dynamic selector (linkTrigger) which is supposed to capture clicks on an element....
From 2024-04-03 23:39:19
0
1
420
Is it possible to have multiple span classes on the same line without using div s? I wanted each text to have a different color, so I used multiple span classes to set the c...
From 2024-04-03 11:17:18
0
1
360
Display inventory counters in multiple locations on the same page This script works great as a stock countdown, but I can't display it in more than 1 positi...
From 2024-04-02 14:25:38
0
2
2529
How to iterate over span tags using for loop in HTML/JavaScript? How to compress so many span tags? I'm trying to make it as small as possible. Any advice ...
From 2024-03-31 16:15:40
0
1
341
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！