Question

我敢肯定这个问题已经被问了很多次它只是不好笑但是搜索过我无法找到解决方案来解决我的问题。

我在php页面上有几个字段集，每个字段集的内容都是从数据库中取出的一段文本。我想在垂直和水平方向上对齐字段集内的文本。水平部分很简单，文字对齐明显，但垂直对齐并不那么简单。

生成的HTML标记：

    <div class="s_container3">
<a href="custom.php?page=19">
    <fieldset class="services_title2">
        Some Short Text
    </fieldset>
</a>
<a href="custom.php?page=18">
    <fieldset class="services_title2">
        More Short Text
    </fieldset>
</a>
<a href="custom.php?page=20">
    <fieldset class="services_title2">
        Some long text that spills onto the second line
    </fieldset>
</a>
<a href="custom.php?page=21">
    <fieldset class="services_title2">
        More short text again
    </fieldset>
</a>
<span class="stretch"></span>
</div>

下面是我正在玩的jsfiddle的链接，它删除了所有额外的无关CSS，以确保我在其他地方没有冲突。

jsfiddle example

您可以看到文本只是粘在字段集的顶部。我已经尝试过把一个内部div容器和其他所有东西放在阳光下但是我一直盯着这个问题这么久它对我来说再也没有意义所以我可能错过了一个简单的解决方案。

任何帮助都将不胜感激，我对任何可以移动文本的方法持开放态度。

如果需要更多信息，请询问！

提前致谢

Answer 1

您可以将行高设置为您的fieldset类，所以：

      html, body { 
height:100%; 
}

        div { 
margin-left:auto; 
margin-right:auto; 
margin-top:0px;
margin-bottom:0px; 
}

        div.s_container3 { 
width:570px; 
text-align:justify; 
}
fieldset.services_title2 { 
    border:none; 
    font-size:1.3em; 
    width:215px; 
    min-height:45px; 
    vertical-align:middle; 
    text-align:center; 
    color:#ffffff; 
    background-color:#1c86b5; 
    margin-top:10px; 
    margin-left:auto; 
    margin-right:auto; 
    display:inline; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -khtml-border-radius: 10px;
     border-radius: 10px; 
    line-height: 45px;
    }

        .stretch { 
width:100%; 
display:inline-block; 
font-size:0; 
line-height:0; 
}
        a { 
text-decoration:none; 
}

http://jsfiddle.net/5H6Lf/

垂直和水平对齐字段集中的文本

1 个答案: