среднее вертикальное выравнивание "img" в "а" - PullRequest
Новая
       0

среднее вертикальное выравнивание "img" в "а"

2 голосов
/ 04 августа 2011

Код HTML: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head></head>
    <body>

        <div class="lt-0 partner">
            <div class="csc-textpic csc-textpic-center csc-textpic-above" >
                <div class="csc-textpic-imagewrap csc-textpic-single-image">
                    <a>
                        <img href="bilder/bild.jpg" />
                    </a>
                </div>
            </div>
        </div>

    </body>
</html>

Код CSS: 

#div .partner div div{
    height: 140px;
    width: 280px;
    border: 1px solid #000;
}

#div .partner div div a{
    height: 100%;
    width: 100%;
    display: block;
    vertical-align: middle;
}

#div .partner div div div a img{
    display: inline;
}

Моя проблема в том, что изображение должно быть в центре, но ссылка должна быть в полном размере.Это часть веб-сайта Typo 3.

Спасибо за помощь заранее.

Ответы [ 3 ]

3 голосов
/ 04 августа 2011

Я думаю, что вы имеете в виду что-то , например, эту скрипку . 

.partner div div {
    height: 140px;
    width: 280px;
    border: 1px solid #000;
}
.partner div div a {
    height: 100%;
    width: 100%;
    display: block;
    line-height: 140px;
    text-align: center;
}
.partner div div a img {
    vertical-align: middle;
}

А если размер контейнера не определен, тогда используйте этот стиль скрипки 

.partner div div {
    height: 140px;
    width: 280px;
    border: 1px solid #000;
}
.partner div div a {
    height: 100%;
    width: 100%;
    display: block;
    text-align: center;
}
.partner div div a img {
    position: relative;
    top: 50%;
    margin-top: -25px; /* = half the image height */
}

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

2 голосов
/ 04 августа 2011

Первое: несколько ошибок в вашем коде

  1. Кажется, что у вас нет элемента с ID="div", но вы используете его во всех селекторах CSS как первыйelement.

  2. Ваш последний селектор CSS, который должен стилизовать ваш IMG элемент, не встречается, поскольку у вас в нем DIV слишком много.

  3. IMG элемент не определяет атрибут href, а скорее src

Второе: решение без сценариев, поддерживающее динамические измерения

Я упростилВаш HTML и немного изменил CSS, чтобы сделать все это более очевидным здесь JSFiddle .Все элементы DIV и IMG имеют произвольные размеры, поэтому стили не зависят ни от одного из своих размеров.

Вот код:

HTML 

<!-- dimensions are set inline to make them of different size -->
<div class="container" style="height: 100px; width: 250px;">
    <a href="#">
        <img src="img111.png" />
    </a>
</div>
<div class="container" style="height: 120px; width: 150px;">
    <a href="#">
        <img src="img222.png" />
    </a>
</div>

CSS 

.container {
    border: 2px solid #c00;
    display: table;
}
.container a {
    border: 2px solid #f90;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.container a img {
    border: 2px solid #9cf;
    background: #eee;
    padding: 2px;
}

Поддержка браузера

display типы, которые я использовал, поддерживаются в большинстве современных браузеров, за исключением (конечно) в IE, где вам понадобится как минимум версия 8. Все, что старше предположительно не поддерживает их.

1 голос
/ 04 августа 2011

Вы можете получить горизонтальное выравнивание для этого изображения, используя для тега "a": 

text-align: center;

Но для получения вертикального выравнивания, к сожалению, вам нужно установить margin-top для этого изображения руками, используя известную высоту родительского div (или, с тем же результатом, padding-top для тега "a"). Вы можете использовать некоторые плагины jquery для него (просто найдите что-то вроде «jquery вертикальное выравнивание плагина» в google, есть много плагинов для него) или написать свой собственный скрипт.

...