0

Screenshot

I created a div container which contains a div for image and a div for text. The parent div's height is set to text div's height automatically. I don't want to set a actual height to the container. What I want is to center the image div vertically in the container, and when I changing the window size horizontally, the image will also change its size, but still at the middle of the container. How should I do?

I've tried 'table-cell', 'inline-block', 'vertical-align: middle', 'position: absolute' methods, but they didn't work.

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
    <div class="container">
        <div class="img">
            <img src="img.jpg">
        </div>
        <div class="text">
            <h3>Heading</h3>
            <p>
                Bacon ipsum dolor amet leberkas pancetta porchetta tenderloin ground round, shoulder doner. Ribeye corned beef ground round tri-tip chicken kevin. Shankle burgdoggen ham hock t-bone brisket jowl pork chop tongue pork belly jerky ham tail venison. Filet mignon porchetta short loin swine fatback, turducken meatball ham hock tongue corned beef pancetta hamburger boudin tenderloin burgdoggen.
            </p>
            <br>
            <p>
                Strip steak landjaeger ham hock, pig picanha cow beef ribs drumstick prosciutto ball tip chicken cupim tongue salami. Cupim flank kielbasa, strip steak pork buffalo boudin. Turducken meatball sausage short ribs bacon pig venison t-bone hamburger. Strip steak alcatra boudin burgdoggen cupim. Leberkas frankfurter swine prosciutto hamburger ball tip.
            </p>
            <br>
            <p>
                Cupim buffalo pork loin, pork chop picanha corned beef turkey sausage cow chuck ham hock flank. Pork belly frankfurter meatloaf andouille spare ribs jowl leberkas venison salami capicola sausage kevin chuck. Flank beef ribs fatback, strip steak bresaola turducken biltong salami boudin tongue spare ribs pastrami shoulder frankfurter cupim.
            </p>
        </div>
    </div>
</body>

*{
    box-sizing: border-box;
}

.container{
    padding: 0 5vw;
    overflow: auto;
}

.img{
    width: 25%;
    float: left;
}

.img>img{
    width: 100%;
}

.text{
    width: 75%;
    float: left;
    padding: 0 0 0 2em;
}

2 Answers2

1

Use display:flex to .container/.img

Vertical img center with justify-content: center; and flex-direction: column;

*{
    box-sizing: border-box;
}

.container{
    padding: 0 5vw;
    overflow: auto;
       display: flex;
}

.img{
    width: 25%;
      display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.img>img{
    width: 100%;
}

.text{
    width: 75%;
    float: left;
    padding: 0 0 0 2em;
}
<div class="container">
        <div class="img">
            <img src="https://i.stack.imgur.com/mSXoO.png">
        </div>
        <div class="text">
            <h3>Heading</h3>
            <p>
                Bacon ipsum dolor amet leberkas pancetta porchetta tenderloin ground round, shoulder doner. Ribeye corned beef ground round tri-tip chicken kevin. Shankle burgdoggen ham hock t-bone brisket jowl pork chop tongue pork belly jerky ham tail venison. Filet mignon porchetta short loin swine fatback, turducken meatball ham hock tongue corned beef pancetta hamburger boudin tenderloin burgdoggen.
            </p>
            <br>
            <p>
                Strip steak landjaeger ham hock, pig picanha cow beef ribs drumstick prosciutto ball tip chicken cupim tongue salami. Cupim flank kielbasa, strip steak pork buffalo boudin. Turducken meatball sausage short ribs bacon pig venison t-bone hamburger. Strip steak alcatra boudin burgdoggen cupim. Leberkas frankfurter swine prosciutto hamburger ball tip.
            </p>
            <br>
            <p>
                Cupim buffalo pork loin, pork chop picanha corned beef turkey sausage cow chuck ham hock flank. Pork belly frankfurter meatloaf andouille spare ribs jowl leberkas venison salami capicola sausage kevin chuck. Flank beef ribs fatback, strip steak bresaola turducken biltong salami boudin tongue spare ribs pastrami shoulder frankfurter cupim.
            </p>
        </div>
    </div>
לבני מלכה
  • 15,925
  • 2
  • 23
  • 47
0

Simply use display:flex for your parent class and align:self:center for image class. I hope this solution will work for you.

* {
    box-sizing: border-box;
}

.container {
    padding: 0 5vw;
    overflow: auto;
    display: flex;
}

.img {
    width: 25%;
    float: left;
    align-self: center;
}

.img>img {
    width: 100%;
}

.text {
    width: 75%;
    float: left;
    padding: 0 0 0 2em;
}

.text h1 {
    margin: 0 0 20px;
}
<div class="container">
    <div class="img">
        <img src="https://via.placeholder.com/350x350">
    </div>
    <div class="text">
        <h3>Heading</h3>
        <p>Bacon ipsum dolor amet leberkas pancetta porchetta tenderloin ground round, shoulder doner. Ribeye corned beef ground round tri-tip chicken kevin. Shankle burgdoggen ham hock t-bone brisket jowl pork chop tongue pork belly jerky ham tail venison. Filet mignon porchetta short loin swine fatback, turducken meatball ham hock tongue corned beef pancetta hamburger boudin tenderloin burgdoggen. </p>
        <p>Strip steak landjaeger ham hock, pig picanha cow beef ribs drumstick prosciutto ball tip chicken cupim tongue salami. Cupim flank kielbasa, strip steak pork buffalo boudin. Turducken meatball sausage short ribs bacon pig venison t-bone hamburger. Strip steak alcatra boudin burgdoggen cupim. Leberkas frankfurter swine prosciutto hamburger ball tip. </p>
        <p>Cupim buffalo pork loin, pork chop picanha corned beef turkey sausage cow chuck ham hock flank. Pork belly frankfurter meatloaf andouille spare ribs jowl leberkas venison salami capicola sausage kevin chuck. Flank beef ribs fatback, strip steak bresaola turducken biltong salami boudin tongue spare ribs pastrami shoulder frankfurter cupim. </p>
        <p>Bacon ipsum dolor amet leberkas pancetta porchetta tenderloin ground round, shoulder doner. Ribeye corned beef ground round tri-tip chicken kevin. Shankle burgdoggen ham hock t-bone brisket jowl pork chop tongue pork belly jerky ham tail venison. Filet mignon porchetta short loin swine fatback, turducken meatball ham hock tongue corned beef pancetta hamburger boudin tenderloin burgdoggen. </p>
        <p>Strip steak landjaeger ham hock, pig picanha cow beef ribs drumstick prosciutto ball tip chicken cupim tongue salami. Cupim flank kielbasa, strip steak pork buffalo boudin. Turducken meatball sausage short ribs bacon pig venison t-bone hamburger. Strip steak alcatra boudin burgdoggen cupim. Leberkas frankfurter swine prosciutto hamburger ball tip. </p>
        <p>Cupim buffalo pork loin, pork chop picanha corned beef turkey sausage cow chuck ham hock flank. Pork belly frankfurter meatloaf andouille spare ribs jowl leberkas venison salami capicola sausage kevin chuck. Flank beef ribs fatback, strip steak bresaola turducken biltong salami boudin tongue spare ribs pastrami shoulder frankfurter cupim. </p>       
        <p>Bacon ipsum dolor amet leberkas pancetta porchetta tenderloin ground round, shoulder doner. Ribeye corned beef ground round tri-tip chicken kevin. Shankle burgdoggen ham hock t-bone brisket jowl pork chop tongue pork belly jerky ham tail venison. Filet mignon porchetta short loin swine fatback, turducken meatball ham hock tongue corned beef pancetta hamburger boudin tenderloin burgdoggen. </p>
        <p>Cupim buffalo pork loin, pork chop picanha corned beef turkey sausage cow chuck ham hock flank. Pork belly frankfurter meatloaf andouille spare ribs jowl leberkas venison salami capicola sausage kevin chuck. Flank beef ribs fatback, strip steak bresaola turducken biltong salami boudin tongue spare ribs pastrami shoulder frankfurter cupim. </p>
    </div>
</div>
Saravana
  • 3,389
  • 4
  • 21
  • 37