CSS字体显示不是假设的

时间:2015-11-10 04:14:08

标签: html css

我的网站右侧有一个字体部分的当前状态,名为:"单词是您可以用3个单词创建自己故事的地方!"

样式网站:http://words.goldwingstudios.de

但我希望它看起来像这样:

Expected font styles

以下是此部分的源代码:

<div class="__log_reg_preview_slogan_container">
    <div class="__log_reg_preview_slogan_quotes">
        "
    </div>
    <div class="__log_reg_preview_slogan">
        Words is the place where you can create your own story out of <b class="__log_reg_preview_slogan_quotes_textbig">3</b> words!
    </div>
    <div class="__log_reg_preview_slogan_quotes">
        "
    </div>
    <div class="fix_float"></div>
</div>

CSS

.__log_reg_preview_slogan_container
{
    width: 80%;
    height: 15%;
    margin: 0 auto;
    text-align: center;
    display: table;
    font-family: words_chat_text;
}

.__log_reg_preview_slogan
{
    display: inline-block;
    width: 400px;
    display: table-cell;
    font-size: 14px;
}

.__log_reg_preview_slogan_quotes
{
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    display: table-cell;
    font-size: 55px;
    font-weight: bold;
    line-height: 101px;
}

.__log_reg_preview_slogan_quotes:not(:first-child)
{
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    display: table-cell;
    font-size: 55px;
    font-weight: bold;
    line-height: 20px;
}

有谁可以告诉我,我做错了什么?

1 个答案:

答案 0 :(得分:2)

新CSS类

.bottom_quote {
    line-height: 0;
    vertical-align: bottom;
    padding-bottom: 8px;
}

将类添加到底部引号:

<div class="__log_reg_preview_slogan_container">
    <div class="__log_reg_preview_slogan_quotes bottom_quote">
        "
    </div>
    <div class="__log_reg_preview_slogan">
        Words is the place where you can create your own story out of <b class="__log_reg_preview_slogan_quotes_textbig">3</b> words!
    </div>
    <div class="__log_reg_preview_slogan_quotes">
        "
    </div>
    <div class="fix_float"></div>
</div>

预览

enter image description here