Еще одна проблема с горизонтальным центрированием CSS - PullRequest
0 голосов
/ 14 марта 2011

Я знаю о марже авто.Однако, это не работает для меня здесь.

Я пытаюсь центрировать (возможно, длинную) строку текста над (относительно узким) изображением.Если текст длиннее изображения, он должен вылиться из результирующего блока на обоих концах, поэтому весь комплекс имеет такую ​​же ширину, как и изображение.

Разметка выглядит примерно так:

<div class="bb">
    <a href="blahblah">
        <b>CaptionAbove</b>
        <img src="blah.png"/>
</a>
    <b>below</b>
</div>

.bb - это встроенный блок, поэтому эти ББ выскакивают по горизонтали в ряд.CaptionAbove может быть длиннее, чем img, но не должен растягивать соседей!элементы a и b являются display: block, так что все внутри здесь складывается вертикально.

Если я задаю заданную ширину, например 1em, чтобы он не увеличивался, чтобы окружить текст, то переполнениетекст находится только справа, а искусственный прямоугольник находится на одном уровне внутри включенного блока .

Мне нравится разметка, объединяющая img и заголовок вместе, и таблица не только потеряет это, ноэффекты наведения мыши, зная, что вертикальный стек - это один элемент.

Любые предложения приветствуются.

1 Ответ

0 голосов
/ 24 марта 2011

Как насчет этого?

http://jsfiddle.net/UvbQJ/1/

...