Вертикальное выравнивание изображения и текста с центрированием текста и плавающим изображением слева

Я просмотрел несколько опубликованных решений для центрирования вертикального выравнивания изображения и текста (например: Выровнять текст по вертикали рядом с изображением?)

Тем не менее, я также пытаюсь зафиксировать изображение слева и отцентровать текст по горизонтали.. точно так же, как в нижнем колонтитуле, где изображение будет «закреплено» слева, а навигация (или текст отказа от ответственности) будет горизонтально в центре этого нижнего колонтитула (и его положение будет регулироваться в зависимости от размера области просмотра).

Это то, что у меня есть до сих пор:

    <div style="width:100%; text-align: center;">
        <img src="logo.png" alt="my logo" style="vertical-align:middle; float: left;" />
        <span>Copyright 2015 by Company, LLC. All Rights Reserved</span>
    </div>

Добавление «плавать: влево;» отключает "vertical-align:middle;". Однако, если я удалю свойство float, я не уверен, как тогда закрепить логотип слева.

Любые идеи, как я могу этого добиться. Просто ищу простой ответ, ничего сложного.

Спасибо!


image vertical-alignment html footer text-align
person mustang888    schedule 05.01.2015    source источник
comment
Опубликуйте код, который вы пробовали, пожалуйста.   -  person j08691    schedule 06.01.2015
comment
где код, который вы пробовали?   -  person Coding Enthusiast    schedule 06.01.2015
comment
Вы знаете высоту изображения? Будет ли это исправлено?   -  person Joe Sager    schedule 06.01.2015
comment
Обновил вопрос и добавил код, над которым я работал.   -  person mustang888    schedule 06.01.2015
comment
@JoeSager да, высота изображения фиксирована.   -  person mustang888    schedule 06.01.2015
comment
почему бы тогда просто не сделать что-то вроде position: relative; top: -15px;? Это будет применено к тексту   -  person Joe Sager    schedule 06.01.2015

Ответы (2)


arrow_upward
1
arrow_downward

Решение, которое работает с поплавком (по крайней мере, в хроме)

<div class="container">
    <img src="http://lorempixel.com/400/200/"/>
    <div class="text">this is some text</div>
</div>

* {
box-sizing: border-box;
}
.container {
width: 100%;
text-align: center;
border: 1px solid red;
display: table;
}

img {
float: left;
}

.text {
border: 1px solid blue;
display: table-cell;
vertical-align: middle;
height: 100%;
}

скрипка: http://jsfiddle.net/u7cjLL1f/

Если вы хотите, чтобы текст занимал весь родительский элемент div и проходил над изображением: http://jsfiddle.net/u7cjLL1f/1/

person Joe Sager    schedule 06.01.2015
comment
Спасибо, что поделился! Есть ли способ сделать текст центрированным внутри всего контейнера... сейчас это выглядит так, как будто есть две ячейки, и текст центрируется в своей собственной ячейке. Поэтому я думаю, что ширина первой ячейки (где находится изображение) должна быть такой же, как ширина изображения. - person mustang888; 06.01.2015
comment
если вы добавите width: 100% к .text, текст займет место, не занимаемое изображением, вы хотите, чтобы текст был над изображением? - person Joe Sager; 06.01.2015
comment
^ Я реализовал другое решение в ответе (текст поверх изображения) - person Joe Sager; 06.01.2015
comment
Спасибо! Добавление ширины: 100% к .text сделало это! Очень признателен! - person mustang888; 08.01.2015

arrow_upward
1
arrow_downward

установить ширину и высоту для , не использовать float Пример:

<div style="width:100%; text-align: center;">
    <img src="logo.png" alt="my logo" style="width:200px; height:200px;vertical-align:middle;display:inline-block" />
    <span>Copyright 2015 by Company, LLC. All Rights Reserved</span>
</div>
person Dyah Isnaeny    schedule 06.01.2015
comment
Спасибо за код! однако изображение также центрировано (по горизонтали). Есть ли способ сделать его закрепленным в крайнем левом углу, сохраняя при этом текст по центру? - person mustang888; 06.01.2015