Problemas ao centralizar o conteúdo do flex.

Estou com um problema relacionado ao align-items, ele alinha o conteúdo desde que não tenha uma imagem junto com o texto.

.flex {display:flex;align-content:space-around;}
.detalhes {justify-content: space-between;height: 50%;box-sizing: border-box;align-items:center;}
.detalhe-opcao {width:33rem;}

<section class="detalhes flex">

    <div class="detalhe-opcao">
        <p>Tamanho:</p>
        <img src="/img/temp-carrinho-ico-tamanho.jpg" alt="Opcao Tamanho" />
    </div>

    <div class="detalhe-opcao">
        <p>Cor:</p>
        <img src="/img/temp-produto-cor.png" alt="Opcao Cor" />
    </div>

    <div class="detalhe-opcao">
        <p>Quantidade:</p>
    </div>

</section>

{align-items:center;}

Quando eu comento a imagem, o paragrafo fica centralizado, quando a imagem está sendo exibida, nada dentro da classe fica alinhado ao centro.

Segue a imagem: http://imgur.com/c2khaMy