добавление отступов автоматически и встроенный текст с изображением - PullRequest
Новая
       0

добавление отступов автоматически и встроенный текст с изображением

0 голосов
/ 17 июня 2020

У меня небольшая проблема с 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>

Ответы [ 3 ]

1 голос
/ 17 июня 2020

Я вижу, что в вашем фрагменте кода используется bootstrap.

Если вы используете bootstrap, не беспокойтесь о дополнительном стиле. Bootstrap уже обслуживает то, что вам нужно, с помощью Flex (d-flex) и выравнивает содержимое с помощью элемента выравнивания

Для получения более подробной информации см. 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 Demo

0 голосов
/ 17 июня 2020

Добавьте это css для текста ссылки вашего класса 

display:flex;
align-items:center;
0 голосов
/ 17 июня 2020

вы можете сделать что-то вроде этого ... 

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...