Как вертикально отцентрировать текст поверх изображения?

0

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

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

В любом случае это может быть достигнуто?

JSfiddle можно найти здесь: http://jsfiddle.net/Sf3RX/2/

HTML

<div class="column">
<div class="image">
    <img src="/">
    <p class="info">cats
        <br><span>#Photography</span>
    </p>
</div>

CSS

    .image {
    position: relative;
    width: 25%;
    text-align: center;
}

img {
    width: 100%;
}

p.info {
    position: absolute;
    width: 100%;
    z-index: 10;
    top: 25%;
}
  • 0
    Размер изображения динамический или вы можете это исправить?
Теги:

4 ответа

1
Лучший ответ

Если вы хотите достичь этого результата: http://jsfiddle.net/paulalexandru/MSfPs/ все, что вам нужно сделать, это:

Настройте свой css следующим образом:

p.info {
    position: absolute;
    width: 100%;
    z-index: 10;
    top: 25%;
    margin: 0;
    padding: 0;
}

И добавьте этот код javascript также:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        $(".image").each(function() {
            var height_image = $(this).find('img').height();
            var height_p = $(this).find('p.info').height();

            var rest = height_image - height_p;
            $(this).find('p.info').css('top', rest/2);
        });
    });
</script>

Код javascript вычисляет свойство css top для каждого <p> чтобы они находились в середине блока.

Еще одно чистое решение css - немного изменить ваш HTML-код, вам нужно добавить высоту стола 100%/ширину 100% и установить выравнивание по вертикали: посередине на <td> и внутри него вы должны поместить абзац.

  • 0
    Выше решение работает нормально.
  • 0
    Это решение сработало отлично! У меня были некоторые проблемы с тем, чтобы заставить его работать с реальной страницей, но я понял это. Большое спасибо!
0
<style>
body{
padding: 0;
margin: 0;
    margin:0px auto;
}
#main{
    position: relative;
width:500px;
height:500px;
}
#abc{
    text-align:center;
background-color:#0F0;
height:250px;
display: table;
width: 100%;
}

#abc span {
    vertical-align:middle;
display: table-cell;
}
</style>
<div id="main">
    <div id="abc">
        <span>asdfasdfafasdfasdf<br/> sdfjdsl flkjdsflk sjdflkjdsf </span>
</div>
</div>
0

Вы можете установить line-height до 100%, что сделает линию той же высоты, что и ваше изображение, вертикально центрируя ее.

JSFiddle

  • 1
    Нет, это не работает.
0

Попробуйте line-height или top:50%;margin-top:/ / -the height of the Textblock

Ещё вопросы

Сообщество Overcoder
Наверх
Меню