CODEWITHSUNDEEP
htmlcss
DuarteLeal
DuarteLeal

Reputation: 11

How to put an image "in the same line" as another

I'm doing this exercise to study, the goal is: I have 3 balls and 3 squares, I want to put the 3 balls in the squares using CSS. But here's the problem: https://i.sstatic.net/9Fygq.png

I'm trying to use padding-top: -??px; to put it there, but seems like the image cant go to the same "line" as the other one is.

Here is the code:

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main">
        <div class="imagem1">
            <img src="bola 1.png">
        </div>
        <div class="imagem2">
            <img src="bola 2.png">
        </div>
        <div class="imagem3">
            <img src="bola 3.png">
        </div>
    </div>
</body>


.main {
  background-image: url('fundo.png');
  background-repeat: no-repeat;
}

.imagem1 {
  padding-left: 283px;
  padding-top: 50px;
}

.imagem2 {
  padding-left: 530px;
  padding-top: 110px;
}

.imagem3 {
  padding-left: 1000px;
  padding-top: -150px;
}

Upvotes: 0

Views: 409

Answers (2)

Baracca
Baracca

Reputation: 1

you can use inline-block!

#images {display: inline-block};

Upvotes: 0

Nick the Community Scientist
Nick the Community Scientist

Reputation: 1801

So here is the thing. You should not be using padding to align items horizontally.

A simple way is to use inline-block. Please check out how easy it is in the example below. You also need to set the width and potentially the height value of your images to be the same in the img tag. You can also use flex/flexbox here is an explaination if you do not want like this solution for some reason.

I want to emphasize that this is a generic solution, it may fix your problem, but it is best you provide HTML code for a more specific solution to your problem.

SOLUTION SIMPLIFIED AFTER COMMENT

#container {
  margin: 0 auto 0 auto;
  /* Setting the width may not be required in your case */
  width: 1000px;
}
<!-- Notice the images have a set width -->
<div id="container">

  <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FCYjenPGUoAAnp2t.jpg&f=1&nofb=1" width="200">

  <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FCYjenPGUoAAnp2t.jpg&f=1&nofb=1" width="200">

  <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FCYjenPGUoAAnp2t.jpg&f=1&nofb=1" width="200">

</div>

Upvotes: 1

Related Questions