Question

我目前正在开发一个网站，但对垂直居中有疑问。

我创建了一个带徽标的标题和徽标上的一些文字。如何使徽标和文本正好在标题的中间？这也适用于我希望文本/按钮位于中间的部分。谢谢。

以下是代码： -

对于标题，我只需要使用相对定位来猜测中间位置。但对于我使用填充的部分，我不确定是否正确。

感谢您的帮助。

Answer 1

这就是我通常使用CSS做的事情，将img和text包装在div中，调用它就像innerDiv

query1.find().then(function(results2){

    for (var i = 0; i < results2.length; i++) {
            var comment = results2[i];

            $("#story"+i+"").append('<div class="comment media"><div class="media-left"><a class="avatar avatar-lg" href="javascript:void(0)"><img src="global/portraits/6.jpg" alt="..."></a></div>'+
        '<div class="comment-body media-body"><a class="comment-author" href="javascript:void(0)">'+comment.get("username")+'</a>'+
        '<div class="comment-meta"><span class="date">Just now</span></div>'+
        '<div class="comment-content"><p>'+comment.get("comment")+'</p></div>'+
        '</div></div>');

    }
    $("#story"+i+"").append('<form class="comment-reply" action="#" method="post">'+
            '<div class="form-group"><textarea class="form-control" rows="5" placeholder="Comment here"></textarea></div>'+
            '<div class="form-group"><button type="submit" class="btn btn-primary">Comment</button></div>'+
            '</form>');
});
// no then() here, there's nothing left to do

Answer 2

从标题img中删除边距，并将以下内容添加到标题中：

width: 100%;
display: table;
text-align: center;

垂直居中文本和按钮的最佳方式

2 个答案: