CODEWITHSUNDEEP
javascripthtmlcss
SKANDORI
SKANDORI

Reputation: 37

adding padding automatically and inline text with image

i have a small issue with css I'm trying to make an image and text inline vertically and the size of padding top and bottom depends on the length of the text like this picture

i've tried to add padding top and bottom but doesn't work it looks like this picture 2 there is any solution with css or should I use a js script for this ?? Thanks

.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>

Upvotes: 0

Views: 507

Answers (3)

Stanley Fernandes
Stanley Fernandes

Reputation: 432

Add this css for your class link-text

display:flex;
align-items:center;

Upvotes: 0

garudamon
garudamon

Reputation: 197

I see your code snippet use bootstrap.

If you use bootstrap don't bother with additional style. Bootstrap already serve what you need with Flex (d-flex), and justify the content with Align Item

For more detail please refer to Bootstrap Flex, this one is sample code that the result similar with your Picture 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

Upvotes: 1

Maulik
Maulik

Reputation: 97

you can do somthing like this...

.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>

Upvotes: 0

Related Questions