元素的垂直对齐

Question

I have HTML code with an image and author description:

<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>

I also have 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;
}

I want to align the description vertically.

image

image       description here 

image

I tried to use padding and margin. But I don't know the length of <p> . So I need to correct my CSS.

Answer 1

Use the property vertical-align: text-top;

Or where ever you want it to align with.

Answer 2

I'm not sure I've completely understood you, but do you mean display elements in a line under the image? If that's what you want you could move the description inside the div that contains the image. See snippet below:

 .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

I believe the css property vertical-align will help?

For example: vertical-align:middle

Answer 4

The problem is really difficult to understand, but as far as I can understand, the following code will help you.

 .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>