[Помогите] Совместите изображения и текст в одной камере вертикально?

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Styler247, 16 сен 2013.

  1. Styler247

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2
    У меня есть небольшая 2x2 HTML таблице. Каждая клетка содержит одно изображение и один кусок текста.

    Пример изображения:

    [​IMG]

    Как вы можете видеть, текст вертикально под вертикально Средний уровень изображения. Как я могу сделать текст по вертикали в центре, относительно изображения на левой?


    Я попробовал несколько различных значений `display`, но я не могу это исправить.

    JSFiddle: http://jsfiddle.net/CaCuq/
     
  2. alex_storm

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

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    559
    Примерно так:
    HTML:
    <div id="nst_block">
    <ul>
        <li> <a id="social_facebook" onclick="window.open(this.href,'external');return false;" href="http://www.facebook.com/pages/Jenier-Teas/261107327023"><span>icon</span>Facebook</a></li>
    <li><a id="social_twitter" onclick="window.open(this.href,'external');return false;" href="http://twitter.com/JenierTeas"><span>icon</span>Twitter</a></li>
    <li><a id="social_linkedin" onclick="window.open(this.href,'external');return false;" href="#"><span>icon</span>Google+</a></li>
    <li><a id="social_share" onclick="window.open(this.href,'external');return false;" class="addthis_button share"><span>icon</span>Share This</a></li>
    
        </ul>
    </div>
    HTML:
    #nst_block #social_body ul {
        margin:0;
        padding:0;
        list-style:none;
        width:250px;
        border:1px dotted #000;
    }
    #nst_block #social_body ul li{
        display:inline-block;
        width:50%;
    }
    #nst_block #social_body ul li a{
        display:block;
        color:#ccc;
        text-decoration:none;
    }
    #nst_block #social_body ul li a:hover{
        color:red;
    }
        #nst_block #social_facebook span {
        display: block;
        float: left;
        text-indent: -9999px;
        width: 24px;
        height: 24px;
        margin: 0 10px 0 0;
        background: transparent url("http://i.imgur.com/QglLT5Q.png") 0 0 no-repeat;
        box-shadow: 0px 5px 3px #303853;
    }
    #nst_block #social_twitter span {
        display: block;
        float: left;
        text-indent: -9999px;
        width: 24px;
        height: 24px;
        margin: 0 10px 0 0;
        background: transparent url("http://i.imgur.com/QglLT5Q.png") -24px 0 no-repeat;
        box-shadow: 0px 5px 3px #303853;
    }
    #nst_block #social_linkedin span {
        display: block;
        float: left;
        text-indent: -9999px;
        width: 24px;
        height: 24px;
        margin: 0 10px 0 0;
        background: transparent url("http://i.imgur.com/QglLT5Q.png") -48px 0 no-repeat;
        box-shadow: 0px 5px 3px #303853;
    }
    #nst_block #social_share span {
        display: block;
        float: left;
        text-indent: -9999px;
        width: 24px;
        height: 24px;
        margin: 0 10px 0 0;
        background: transparent url("http://i.imgur.com/QglLT5Q.png") -72px 0 no-repeat;
        box-shadow: 0px 5px 3px #303853;
    }
    
     
  3. Styler247

    Styler247

    Регистрация:
    16 май 2013
    Сообщения:
    87
    Симпатии:
    2
    Можете ли вы сделать JSFiddle? Я пытался применения обновленного кода, но это не выглядело правильно.