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.
Use the property vertical-align: text-top;
Or where ever you want it to align with.
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>
I believe the css property vertical-align
will help?
For example: vertical-align:middle
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.