CODEWITHSUNDEEP
htmlcss
Nic
Nic

Reputation: 37

Images always in middle of container

I want the first image to stick to the top of the container and the following images should be below it... top:0; lets the image be..200px above the container and if I just say position:relative its always in the middle...;

<div class="container">
    <div class="card_left"> 
        <p style="font-size:1.6em; padding: 15px 0;"><b>Title</b></p>
        <p style="font-size:1.2em;">Long text</p>
    </div>
    <div class="card_right">
        <img src="../res/images/artikel1bild.PNG"/>
        <img src="../res/images/artikel1bild.PNG"/>
    </div>

Upvotes: 0

Views: 54

Answers (3)

nipek
nipek

Reputation: 850

try this

 img {
  margin: 0, auto;width: 200px;display:inline-block;height:100px;
}
    <div class="card_right">
        <img src="https://www.w3schools.com/css/img_fjords.jpg"/>
        <img src="https://www.w3schools.com/css/img_fjords.jpg"/>
    </div>

Upvotes: 0

UnseenSpecter
UnseenSpecter

Reputation: 68

Just add <br /> after each image if you want to stick to HTML:

<div class="card_right">
   <img src="../res/images/artikel1bild.PNG"/><br />
   <img src="../res/images/artikel1bild.PNG"/><br />
</div>

Or the better way would be to make a separate CSS file and set display: block; for your img tags:

img {
   display: block;
}

Example: https://jsfiddle.net/nk8fbr76/

Upvotes: 0

Paolo Forgia
Paolo Forgia

Reputation: 6746

Use display: block so there will be no other images in the same line and margin: auto for centering the image

img {
  display: block;
  margin: auto;
  width: 200px;
}
<div>
  <img src="https://www.w3schools.com/css/paris.jpg" />
  <img src="https://www.w3schools.com/css/paris.jpg" />
  <img src="https://www.w3schools.com/css/paris.jpg" />
</div>

Upvotes: 1

Related Questions