Question

第一篇文章！好极了！您好Stackoverflow我有一个问题。

我有一个100％宽度和自动高度的div，里面有两个东西。文本框和图像。我希望这两个人总是垂直居中，但我似乎无法弄清楚如何！这是我的代码。

编辑：这是关于imacshowcase。

HTML

<section id="responsiveshowcase">
    <h1>Services</h1>
    <div id="imacshowcase">
        <div id="imacshowcasedesc"><img  src="img/icons/code.png" alt="">
            <h1>Website Development</h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div><img class="wow animated slideInRight" src="img/imacshowcase.png" alt=""> </div>
            <br class="clearBoth" />
    <div id="macbookshowcase"><img class="wow animated slideInLeft" src="img/macbookshowcase.png" alt="">
        <div id="macbookshowcasedesc"><img src="img/icons/seo.png" alt="">
            <h1>SEO</h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div>
            <br class="clearBoth" />
    </div>
</section>

CSS

#responsiveshowcase {
    width: 100%;
    text-align: center;
    font-family: 'Raleway', sans-serif;
}

#imacshowcase {
    width: 100%;
    overflow: auto;

}

#imacshowcasedesc {
    width: 40%;
    height: 100%;
    margin-left: 10%;
    margin-right: 5%;
    float: left;
}

#imacshowcase > img {
    width: 30%;
    margin-left: 5%;
    margin-right: 10%;
}

#imacshowcasedesc > img {
    width: 10%;
    margin-bottom: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#imacshowcasedesc > h1 {
    margin-top: 0;
    font-size:1.5em
}

#macbookshowcase {
    width: 100%;
}

#macbookshowcasedesc {
    width: 40%;
    display: block;
    float: left;
    margin-left: 5%;
    margin-right: 10%;
}

#macbookshowcase > img {
    width: 30%;
    display: block;
    float: left;
    margin-left: 10%;
    margin-right: 5%;
}

#macbookshowcasedesc > img {
    width: 10%;
    margin-bottom: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#macbookshowcasedesc > h1 {
    margin-top: 0;
}

Answer 1

首先，通常最好的做法是不要使用ID标签做很多样式，并主要为javascript函数保留它们。请改用css类来设置样式。

其次， Flexbox是您的朋友

#responsiveshowcase {
   display: flex;
   align-items: center;
}

Answer 2

问题解决了！

#responsiveshowcase {
display: flex;
align-items: center;
}

似乎没有用，但是

#macbookshowcase {
width: 100%;
display: flex;
align-items: center;
}

做到了！

垂直中心两个div彼此相邻没有任何作用

2 个答案: