如何在CSS中将跨度文本居中在图像旁边[重复]
Posted
技术标签:
【中文标题】如何在CSS中将跨度文本居中在图像旁边[重复]【英文标题】：How to center a span text next to an image in CSS [duplicate] 【发布时间】：2020-04-09 04:45:07 【问题描述】：我正在尝试使用 CSS 将文本与图像一起居中。我认为变换标签会将它沿图像居中，但这一定是针对不同的情况。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img
width: 100px;
.text
font-size: 50px;
transform: translateY(-50%);
</style>
</head>
<body>
<div class="class">
<img src="image.jpg">
<span class="text">Center text</span>
</div>
</body>【问题讨论】：
【参考方案1】：一种方法是将display: inline-block; 和vertical-align: middle; 同时应用于图像和文本范围：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img
width: 100px;
display: inline-block;
vertical-align: middle;
.text
display: inline-block;
vertical-align: middle;
font-size: 50px;
</style>
</head>
<body>
<div class="class">
<img src="image.jpg">
<span class="text">Center text</span>
</div>
</body>【讨论】：
以上是关于如何在CSS中将跨度文本居中在图像旁边[重复]的主要内容，如果未能解决你的问题，请参考以下文章