元素的垂直對齊

Question

我有帶有圖像和作者描述的HTML代碼：

<div class="blog-article-author">
    <div class="blog-article-author-details">
        <div class="post-author-image-desc">
            <img alt="" src="1.jpg" height="75" width="75">                             
        </div>
        <h6><a href="#" title="Posts by admin">admin</a></h6>
        <p>Lorem Ipsum</p>
    </div>
</div>

我也有CSS：

.blog-article-author {
    border: 1px solid #d7d7d7;
    padding: 20px 30px 35px;
    margin: 75px 0;
}

.blog-article-author-details {
    padding-top: 5px;
}

.post-author-image-desc {
    text-align: center;
}

.page-content .blog-article img {
    float: left;
}

.blog-article-author-details h6 {
    padding-top: 25px;
}

我想垂直對齊描述。

image

image       description here 

image

我嘗試使用填充和邊距。 但是我不知道<p>的長度。 因此，我需要更正我的CSS。

Answer 1

使用屬性vertical-align：text-top;

或您希望它與之保持一致的地方。

Answer 2

我不確定我是否已完全理解您，但是您是說在圖像下方的一行中顯示元素嗎？ 如果那是您想要的，則可以在包含圖像的div中移動說明。 請參見下面的代碼段：

 .blog-article-author { border: 1px solid #d7d7d7; padding: 20px 30px 35px; margin: 75px 0; } .blog-article-author-details { padding-top: 5px; } .post-author-image-desc { text-align: center; } .page-content .blog-article img { float: left; } .blog-article-author-details h6 { padding-top: 25px; } 

 <div class="blog-article-author"> <div class="blog-article-author-details"> <div class="post-author-image-desc"> <img alt="" src="http://placehold.it/200x200" height="75" width="75"> <h6><a href="#" title="Posts by admin">admin</a></h6> <p>Lorem Ipsum</p> </div> </div> </div> 

Answer 3

我相信CSS屬性vertical-align會有所幫助嗎？

例如： vertical-align:middle

Answer 4

這個問題確實很難理解，但是據我所知，以下代碼將為您提供幫助。

 .blog-article-author { border: solid 1px #DDD; padding: 10px; } .post-author-image-desc { display:table; } .post-author-image-desc img { float:left; } .post-author-image-desc h6 { margin: 0px 0px 4px 0px; } .post-author-image-desc p { margin: 0px; } .post-author-image-desc .post-full-desc { display:table-cell; vertical-align:middle; padding: 4px; } 

 <div class="blog-article-author"> <div class="blog-article-author-details"> <div class="post-author-image-desc"> <img alt="" src="http://www.sheffield.com/wp-content/uploads/2013/06/placeholder.png" height="100" width="100"> <div class="post-full-desc"> <h6>Admin</h6> <p>Lorem ipsum dolor sit amet, ei vix ubique meliore. Vivendum honestatis mea ex.</p> </div> <div class="clear"> </div> </div> </div>