Ничто не работает для вертикального центра двух делений рядом друг с другом

Question

Первый пост! Ура! Привет Stackru У меня есть проблема.

У меня есть div с шириной 100% и высотой авто с двумя вещами в нем. Текстовое поле и изображение. Я хочу, чтобы эти два всегда были вертикально ориентированы друг к другу, но я не могу понять, как! Вот мой код

Редактировать: это о 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;
}

сделал!