Question

Screenshot

我创建了一个div容器，其中包含用于图像的div和用于文本的div。父div的高度自动设置为文本div的高度。我不想为容器设置实际高度。我想要的是将图像div垂直居中放置在容器中，而当我水平更改窗口大小时，图像也将更改其大小，但仍位于容器的中间。我该怎么办？

我尝试过“表格单元格”，“内联块”，“垂直对齐：中间”，“位置：绝对”方法，但是它们不起作用。

<!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;
}

Answer 1

使用display:flex到.container/.img

垂直img以justify-content: center;为中心，并且 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>

Answer 2

只需将display:flex用于父类，将align:self:center用于图像类。我希望这个解决方案对您有用。

* {
    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>

如何在不知道高度的div中垂直居中放置div？

2 个答案: