我有一个css的小问题，我试图使一个图像和文本垂直内联，填充的大小，顶部和底部取决于文本的长度，就像这张图片
我已经尝试添加填充顶部和底部，但没有工作，它看起来像这张图片2有任何解决方案与css或我应该使用一个js脚本为这？？ 谢谢
null
.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>null
你可以做这样的事。。。
null
.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>
我看到您的代码片段使用引导程序。
如果你使用bootstrap，不要费心使用额外的样式。 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>
Codepen演示
为您的类添加此css链接-文本
display:flex;
align-items:center;
