как сделать в бегушей строке выравнивания текста по центру

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем serrty, 25 авг 2015.

  1. serrty

    serrty

    Регистрация:
    9 июн 2015
    Сообщения:
    76
    Симпатии:
    0
    здравствуйте подскажите пожалуйста

    есть таблица в таблице строка, в строке вставил бегущую строку, в бегущую строку вставил изображение и ссылку рядом, почему ссылка, выравнивается по нижнему краю а нужно по центру, чтобы была по середине на уровни картинки?

    <tr>
    <td colspan="4" class= "td3" ><marquee scrollamount="4" scrolldelay="100" onmouseover="this.stop()" onmouseout="this.start()" ><img src="img_zdorovie/retseptori_cheloveka.jpg" alt=" " width="70px" height="50px"/><a class="class1" href="zahita-cheloveka-retseptorami.php" target="_top" >Рецепторы человека</a></marquee></td></tr>

    а вот стили
    .td3{height: 50px; text-align: center; }
    marquee{ width: 100%; height:50px; }
    a.class1:link{ color:black; text-decoration: none;}
    a.class1:visited{ color: black; text-decoration: none; }
    a.class1:active { color: red; text-decoration: none; }
    a.class1:hover { color: blue; text-decoration: underline;}

    буду очень рад если поможете, никакие выравнивания с ссылкой как внешние, так и внутренние не работают
     
  2. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    text-align:center - выравнивает текст по горизонтали, а не вертикали.

    a {
    display: block;
    margin-left: 80px;
    margin-top: -38px;
    }
    img {
    display: inline-block;
    }

    Если хардкодом, то это будет так
     
  3. serrty

    serrty

    Регистрация:
    9 июн 2015
    Сообщения:
    76
    Симпатии:
    0
    если одна картинка и ссылка, то работает, а если больше, то как вместить все одну строку, потому как ваш код, вторая картинка идет под первой вместе с сылкой
    <td colspan="4" class= "td3" ><marquee scrollamount="4" scrolldelay="100" onmouseover="this.stop()" onmouseout="this.start()" ><img src="img_zdorovie/retseptori_cheloveka.jpg" alt=" " width="70px" height="50px" /><a class="class1" href="zahita-cheloveka-retseptorami.php" target="_top" >Рецепторы человека</a><img src="img_zdorovie/retseptori_cheloveka.jpg" alt=" " width="70px" height="50px" /><a class="class1" href="zahita-cheloveka-retseptorami.php" target="_top" >Рецепторы человека</a></marquee></td>
     
  4. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    Нужно создавать объект и вкладывать его.

    Впротивном случаи придется корректировать отображение каждого элемента своими руками.

    Т.е.
    <marquee>
    <div class="block">
    <div class="image">
    </div>
    <div class="sometext">

    </div>
    </div>
    <div class="block">
    <div class="image">
    </div>
    <div class="sometext">

    </div>
    </div>
    <div class="block">
    <div class="image">
    </div>
    <div class="sometext">

    </div>
    </div>
    <div class="block">
    <div class="image">
    </div>
    <div class="sometext">

    </div>
    </div>
    <div class="block">
    <div class="image">
    </div>
    <div class="sometext">

    </div>
    </div>
    </marquee>

    И так до бесконечности
     
  5. serrty

    serrty

    Регистрация:
    9 июн 2015
    Сообщения:
    76
    Симпатии:
    0
    a.class1:link{ overflow: hidden; margin-left:80px; display:block; margin-top:-50px; text-decoration: none;}
    .ghgp{
    float:left;
    }

    сделал так в одной строке, но только display:block; когда тянешь его вверх, перекрывает картинку, можно как нибудь сделать чтобы он шел за ней чтобы не закрывал ее?

    <marquee scrollamount="4" scrolldelay="100" onmouseover="this.stop()" onmouseout="this.start()" ><div class="ghgp"><img src="img_zdorovie/retseptori_cheloveka.jpg" alt=" " width="70px" height="50px" /><a class="class1" href="zahita-cheloveka-retseptorami.php" target="_top" >Рецепторы человека</a></div> &nbsp&nbsp&nbsp <div class="ghgp"><img src="img_zdorovie/retseptori_cheloveka.jpg" alt=" " width="70px" height="50px" /><a class="class1" href="zahita-cheloveka-retseptorami.php" target="_top" >Рецепторы человека</a></div></marquee>