我在使用 CSS 时遇到了一个小问题，我正在尝试垂直内联图像和文本，顶部和底部填充的大小取决于文本的长度，就像这张图片一样
我尝试添加顶部和底部的填充，但不起作用，看起来像这张图片 2 CSS 有任何解决方案，或者我应该为此使用 js 脚本吗？ 谢谢
.previ-background {
/* ONE */
background-color: white;
}
.previ-username {
font-size: 13px;
margin-top: 5px;
text-align: center;
font-weight: 600;
color: grey;
}
.link {
display: block;
font-size: 11px;
line-height: 2.8em;
font-weight: 700;
letter-spacing: 0.1em;
color: white;
padding: 5px;
/* TRANSITION */
transition: all 0.2s ease;
/* ONE */
background-color: black;
}
.link img {
width: 50px;
}
.link-text {
font-size: 14px;
height: 100%;
line-height: 1.5rem;
}
.link:hover {
font-size: 11px;
color: black;
background-color: white;
border: 2px solid black;
padding: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
<meta content="Coderthemes" name="author" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- App css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class='previ-background' style=''>
<div class="account-pages mt-4 mb-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12 col-lg-10 col-xl-8">
<div class="">
<div class="">
<div class="text-center">
<div class="" style='padding-top:20px'>
<div class="testimony__avatar text-center" style="text-align:center">
</div>
<div class="previ-username">
@Hello
</div>
<div class="previ-bloc-links mt-4">
<!-- LINK 1 -->
<!-- Affichage AVEC VIGNETTE -->
<a href="#" onclick="insert(this.id,this.name)" name="" id="" class="link link-text" style='margin-top:17px'>
<div style="float:left;">
<img style='width: 50px; height:50px; object-fit: cover;' src="assets/image.png">
</div>
<div class='link-text'>
Mon titre
</div>
<div style='clear:both'></div>
</a>
</div>
</div>
</div>
</div>
<!-- end card-body -->
</div>
<!-- end card -->
<!-- end row -->
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end page -->
</body>
</html>我看到你的代码片段使用引导程序。
如果您使用引导程序，请不要为其他样式而烦恼。Bootstrap 已经通过 Flex (d-flex( 提供了您需要的内容，并使用 Align Item 来证明内容的合理性
有关更多详细信息，请参阅Bootstrap Flex，这是示例代码，其结果与您的图片1相似。
<div class="row">
<div class="col-12 d-flex align-items-center">
<div class="p-2 flex-shrink-1"><img src="https://picsum.photos/200" alt="" class="img-thumbnail"></div>
<div class="p-2 flex-grow-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec ullamcorper sit amet risus. Nunc aliquet bibendum enim facilisis. Lectus sit amet est placerat in egestas. Sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar.
</div>
</div>
</div>
代码笔演示
你可以做这样的事情...
.main{
display:flex;
align-items:center;
background-color:lightgray;
}
.image{
height:100px;
width:100px;
}
.text{
margin:10px;
text-align:center;
}<div class="main">
<img src="https://cdn.pixabay.com/photo/2017/05/24/09/28/great-2339957_1280.jpg" class="image" alt="">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>为类链接文本添加此 css
display:flex;
align-items:center;