<分区>
<分区>
我正在尝试使用 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>最佳答案
一种方法是将 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>关于html - 如何在 CSS 中将跨度文本居中放置在图像旁边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59361392/
相关文章：
javascript - jQuery 显示与元素的第一个子元素具有相同数字后缀的 div
javascript - 带有多个图标的 Google Maps API 标记
javascript - 在 Jenkins 的可编辑电子邮件通知对话框中使用 <script> 标签
javascript - 在部分/粘性侧边栏上滚动时添加/删除类
jquery - 如何解决桌面浏览器上由具有不同页面内容高度的页面之间的滚动条切换触发的背景内容抖动问题？
android - 带有 Cordova 的 jsPDF - 添加图像