Не удается расположить элементы - PullRequest
Новая
       33

Не удается расположить элементы

1 голос
/ 02 декабря 2011

У меня есть тег Span, содержащий тег IMG и другой тег Span.Мне бы хотелось, чтобы внутренний тег Span был выровнен по левому краю, а тег IMG выровнен по центру, плюс я хочу, чтобы оба тега были выровнены по вертикали посередине, и я не могу понять, что это правильно ...

Вот как это выглядит (это синий, потому что внешний тег Span отмечен в FireBug, чтобы показать, что он растягивает всю поверхность):

enter image description here

Как вы можете видетьна изображении оба тега центрированы, и они также выровнены в верхней части контейнера, я не хочу ничего из этого.

Это разметка:

enter image description here

Это текущий CSS тегов: 

.v-button-wrap {
    height: 100%;
    display: block;
    padding: 6px 15px 0 9px;
    vertical-align: middle;
    line-height: normal;
    text-align: center;
}

.v-icon {
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    line-height: normal;
    text-align: center;
}

.v-button-caption {
    text-align: left;
    line-height: normal;
    vertical-align: middle;
}

Я пропустил CSS, который не имеет отношения к моей проблеме, цветам, спецификациям шрифтов и тому подобному.Излишне говорить, что я не ас в CSS.Я просмотрел несколько руководств, посвященных этой проблеме, но мне удалось найти только примеры, в которых центрировано все содержимое div, а это не то, что мне нужно.

Кто-нибудь с хорошими знаниями CSSувидеть проблему в моем коде?Или есть другое решение для решения моей проблемы ..?

Спасибо!

РЕДАКТИРОВАТЬ: Вот снимок экрана всего макета из-за запроса.Извините, я должен размыть некоторые вещи ... но они в любом случае не важны.=)

enter image description here

EDIT2: Мне удалось решить мою проблему с помощью следующего CSS: 

.v-button-details-panel-header .v-button-wrap {
    height: 100%;
    text-align: inherit;
    padding: 0px;
}

.v-button-details-panel-header .v-button-wrap .v-button-caption {
    display: table-cell;
    position: relative;
    text-align: left;
}

.v-button-details-panel-header .v-button-wrap .v-icon {
    display: table-cell;
    position: relative;
    top: 12px;
    margin-left: auto;
    margin-right: auto;
}

Я уверенпредложенный совет dgvid был бы хорош для статической компоновки.Но поскольку панели и горизонтально растянутые кнопки двигаются в зависимости от расширения и свертывания, это не было подходящим решением.

1 Ответ

1 голос
/ 02 декабря 2011

Может потребоваться установить для свойства * img и span.v_button_caption CSS display значение inline-block.

См. Также эту статью: Понимание выравнивания по вертикали или «Как (не) центрировать содержимое по вертикали»

Что касается другого метода для достижения желаемого результата: если вы знаете высоту элемента контейнера и знаете высоту центрируемого элемента (и, к сожалению, из опубликованного вами CSS, это не значит, что вы сделать), тогда вы могли бы

  1. Дайте CSS-элементу элемента контейнера `position: относительный '
  2. Присвойте элемент CSS элементу, который будет центрирован position: absolute
  3. Установите свойство CSS top элемента для центрирования на (containerHeight / 2) - (centeredEltHeight / 2).
...