CODEWITHSUNDEEP
htmlcss
T.Jami
T.Jami

Reputation: 1

how to get a floated image to the center

so I am basically coding my website. I made a container, where a text floats to the left and the img to the right. I set a min-width for the text so it gets responsive. The image size is also responsive. Once the screen width gets lower, the image does get under the text but not in the center. I tried using margin: 0 auto; but that didn't help either.

.container {
  width: 88%;
  margin: auto;
  overflow: hidden;
}


/* showcase */

#showcase h1 {
  margin: 0;
}

#text {
  width: 60%;
  float: left;
  min-width: 300px;
}

#pic {
  width: 40%;
  float: right;
}

#pic img {
  width: 100%;
}
<section id="showcase">
  <div class="container">
    <div id="text">
      <h1> dummy text </h1> <button class="button_1">Kontakt</button> </div>
    <div id="pic"> <img class="mypic" src="./img/menew.png"> </div>
  </div>
</section>

Upvotes: 0

Views: 44

Answers (2)

T.Jami
T.Jami

Reputation: 1

I deleted #pic float and added auto margin + a min width

#pic{
width: 40%;
min-width: 300px;
margin: 0 auto;
}

and made a media query:

@media (min-width: 600px) {
    #pic {
        float: right;
    }
}

Upvotes: 0

ShrewdStyle
ShrewdStyle

Reputation: 520

Use flex rather than a float on your container, you will get a better response from it

.container {
  width: 88%;
  overflow: hidden;
  display: flex;
}

/* showcase */
#showcase h1 {
  margin: 0;
}

#text {
  min-width: 300px;
}

#pic {
  width: 40%;
}
#pic img {
  width: 100%;
}

You can now change the width of your #text div to place where you want the elements

Media query as asked for responsive

@media (max-width: 750px) {
  .container {
    display: block;
  }
}

Upvotes: 1

Related Questions