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

使用该属性垂直对齐：文本顶部;

或者你希望它与哪个对齐。

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属性bundle.configuration.watch=true bundle.symbolic.name=<bundle-name>会有所帮助吗？

例如：vertical-align

Answer 4

问题很难理解，但据我所知，以下代码可以帮助您。

＆＃13;

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

＆＃13;

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

＆＃13;

元素的垂直对齐

4 个答案: