将元素与图像中间对齐而不包裹在div中？答案

【问题标题】：Middle align elements with image without wrapping in div?将元素与图像中间对齐而不包裹在div中？
【发布时间】：2016-10-04 11:06:19
【问题描述】：

试图帮助一位朋友开发她的 Squarespace 网站。主页上有一个文章列表，标题下方是浮动到标题左侧的图像，一个按钮和一个带有一些跨度链接的 div。不幸的是，标题、按钮和跨度链接没有包含在它们自己的 div 中。

请务必注意，我无法在此处更改实际的 HTML 结构，否则这将非常容易。 我唯一的选择是 CSS 和 javascript。

您可以在此处的网站上查看 HTML：http://aikaslovecloset.com

请注意标题如何与图像顶部对齐，这在较高的图像上看起来有点糟糕。是的，我建议她只使用水平图像，但我想这对于时尚博主来说并不理想。有没有人有任何疯狂的 CSS 技巧来将它推到图像的中间，以响应图像高度？

【问题讨论】：

如果您显示（图像或其他方式）问题的确切原因，帮助更容易和更快......
我认为您没有将额外的元素（标题/按钮）包装在自己的容器中，从而搞砸了自己。
@TylerSebastian 我没有编写 HTML 代码。它是 Squarespace 模板的一部分，我可以更改源代码的唯一方法是启用“开发人员模式”，这会禁用她的所有拖放编辑。如果我可以选择将内容包装在 div 中，我会的。

标签： html css

【解决方案1】：

嘿，有些人会讨厌这个（这是正确的），但是如果它是绝对必要的（但是你决定确定它），可以使用 jQuery DOM 操作。简单地说，将每个.entry-footer 附加到具有.entry-content 类的前一个兄弟姐妹。然后在每个.entry-content 中，将除.excerpt-thumb 之外的每个子元素（现在包括页脚）包装在一个新的div 中。样式 .entry-thumb 和新的 div 为 display: inline-block; vertical-align: middle;。确保从.entry-thumb 中删除浮动。

出于演示目的，我已经简化了代码：

$('.view-list .entry-footer').each( function(){
      $(this).appendTo($(this).prev('.entry-content'));          
});
$('.view-list .entry-content').each(function(){
  $(this).children().not('.excerpt-thumb').wrapAll('<div class="new-div" />');
});

article {
 display: block; 
}
.excerpt-thumb {
    display: inline-block;
    height: auto;
    margin: 0 1.5em 1.5em 0;
    overflow: auto;
    width: 67%;
  float: none;
  vertical-align: middle;
}
.entry-title, .entry-content {
    text-align: center;
}
.clear::after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
.entry-footer {
  display: block;
  text-align: center;
}
.excerpt-thumb img {
    height: auto !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
}
.new-div {
  display: inline-block;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="view-list">
<article>
<header class="entry-header">article 1</header>
<div class="entry-content">
  <div class="excerpt-thumb">
    <img data-image-focal-point="0.45806318271659807,0.5180000305175781" data-image-dimensions="2500x3750" data-image="https://static1.squarespace.com/static/579e8e0a37c581f9480799ab/579e8ee42109d3fc32bf7bcb/57eb59d2e6f2e1db2856bb18/1475374638274/Aika+Testing+testing+1+2+3-Aika-0049.jpg" data-src="https://static1.squarespace.com/static/579e8e0a37c581f9480799ab/579e8ee42109d3fc32bf7bcb/57eb59d2e6f2e1db2856bb18/1475374638274/Aika+Testing+testing+1+2+3-Aika-0049.jpg" style="top: 0px; left: 0px; width: 544px; height: 816px; position: relative;" alt="Silk Feel, Slip Dress Obsession " class="" src="https://static1.squarespace.com/static/579e8e0a37c581f9480799ab/579e8ee42109d3fc32bf7bcb/57eb59d2e6f2e1db2856bb18/1475374638274/Aika+Testing+testing+1+2+3-Aika-0049.jpg?format=750w" data-image-resolution="750w">
  </div>
  <div class="p-summary">
  article 1 p-summary
  </div>
  <p class="entry-more-link">article 1 entry-more-link</p>
</div>
<footer class="entry-footer clear">article 1 footer</footer>
</article>
<article>
<header class="entry-header">article 2</header>
<div class="entry-content">
  <div class="excerpt-thumb">
    <img data-image-focal-point="0.45806318271659807,0.5180000305175781" data-image-dimensions="2500x3750" data-image="https://static1.squarespace.com/static/579e8e0a37c581f9480799ab/579e8ee42109d3fc32bf7bcb/57eb59d2e6f2e1db2856bb18/1475374638274/Aika+Testing+testing+1+2+3-Aika-0049.jpg" data-src="https://static1.squarespace.com/static/579e8e0a37c581f9480799ab/579e8ee42109d3fc32bf7bcb/57eb59d2e6f2e1db2856bb18/1475374638274/Aika+Testing+testing+1+2+3-Aika-0049.jpg" style="top: 0px; left: 0px; width: 544px; height: 816px; position: relative;" alt="Silk Feel, Slip Dress Obsession " class="" src="https://static1.squarespace.com/static/579e8e0a37c581f9480799ab/579e8ee42109d3fc32bf7bcb/57eb59d2e6f2e1db2856bb18/1475374638274/Aika+Testing+testing+1+2+3-Aika-0049.jpg?format=750w" data-image-resolution="750w">
  </div>
  <div class="p-summary">
  article 2 p-summary
  </div>
  <p class="entry-more-link">article 2 entry-more-link</p>
</div>
<footer class="entry-footer clear">article 2 footer</footer>
</article>
</div>

这很恶心，但它就在那里。但是您寻求的解决方案无法以目前的方式使用 HTML。

【讨论】：

感谢 Daniel，这看起来是一个非常完整的解决方案。我将在测试时尝试并更新这个和另一个答案（如下）。再次感谢！
刚刚实现，效果很好。现在，如果我能说服她在两个 div 上增加 50% 的宽度而不是 67% 就好了。一步一步来。谢谢丹尼尔！
很高兴听到@JesseRogers。我同意那些更高的图像，文字开始感觉有点飘忽不定。呃，好吧。我们必须选择我们的战斗——比如为了外观而破坏语义。 ;) 一切顺利。

【解决方案2】：

当我处理 Squarespace 并遇到这种麻烦时，我使用 Jquery 来包装东西（肮脏的解决方案，但它有效）

$(".p-summary, .entry-more-link").wrapAll( "<div></div>" );

这段代码将标题和按钮包装在一个 div 中。

【讨论】：

已经在 Squarespace 中使用 jQuery 解决了一些问题。我会先试试这个，如果我不能让它工作，我会试试丹尼尔的。谢谢！

【解决方案3】：

尝试仅在“p-summary”类上使用“padding-top”：

.p-summary {
  padding-top: 50px;
}

【讨论】：