CSS: Как выровнять деление с центром другого деления?

Question

Я новичок в веб-дизайне. Я пытаюсь сделать коробку со значком и ссылкой. Когда на экране находится ноутбук, ссылка должна быть слева от значка и выровнена по центру по вертикали; когда на экране отображается планшет и мобильный телефон, значок должен находиться под нижней частью значка и выравниваться по центру по горизонтали. И значок намного больше, чем ссылка. Вот ссылки на код и изображения:

<div class="box">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6">
             <span class="info-box-icon"><i class="mega-octicon octicon-server"></i></span>
        </div>
        <div  class="col-xs-12 col-sm-12 col-md-6">
            <a class="side-box-link" href="workflow-summary" style="vertical-align:middle;">Work Flow</a>
        </div>  
    </div>  
</div>

ссылки на изображения:

• bg and md: http://ww3.sinaimg.cn/bmiddle/77f9deafgw1evmq9c8z5tj206703amx6.jpg
• см и хз: http://ww3.sinaimg.cn/bmiddle/77f9deafgw1evmq9cxdttj2045041gll.jpg

Я испробовал много методов, но все еще не могу выровнять ссылку по центру значка по вертикали, и ссылка всегда выравнивается в верхней части окна. Методы, которые я попробовал:

1. Используйте таблицу и установите значок и ссылку в виде двух данных таблицы: они могут быть выровнены так, как я хочу, но, поскольку они представляют собой два столбца, ссылка не может перемещаться вниз при изменении размера экрана.

2. Используйте таблицу, поместите их в одну строку: выровняйте в верхней части окна.

3. Использовать список: выровнять в верхней части окна.

4. Используйте поля в CSS: хорошо выровняйте на экране md и bg, но значок и ссылка также будут иметь пробел в sm и xs.

5. Используйте "vertical-align:middle" в CSS: просто не работает

   Что я должен делать? Любой совет будет признателен, спасибо!

Answer 1

Вы можете использовать Flexbox, здесь есть хорошее руководство . Полное руководство по Flexbox.

Также взгляните на этот пример, который я сделал для вас, надеюсь, он вам поможет.

HTML-код:

<div class="box">
<div class="row">
    <div class="icon">
         <span class="info-box-icon"><i class="mega-octicon octicon-server"></i></span>
    </div>
    <div class="link">
        <a class="side-box-link" href="workflow-summary" style="vertical-align:middle;">Work Flow</a>
    </div>  
</div>  

И это CSS:

.row {
display: flex;
align-items: center;

}
.icon {
    width: 200px;
    height: 200px;
    background-color: salmon ;
}
.link{
    padding: 10px;
}

a {
    text-decoration: none;
}

@media (max-width: 450px) {
    .row {
        flex-direction: column;
    }   
}

Я использовал фиксированные размеры со значком для иллюстрации, но он будет работать с любым размером.

Взгляните на этот живой пример JSFiddle Flex Example