如何对齐 div 集合中的图像和按钮？

Question

我对 CSS 很不满意。我正在尝试解决图像中捕获的问题。我的容器中的一个部分的文本量略少，导致在较小的设备上查看页面时看起来不对齐。我正在努力使事情排列得更整齐，但我不知道该怎么做。

这是 Jade 中的代码：

extends base
block content
  #marketing.container
    .row
      .3u
        section
          header
            h2.titlething Sales & Marketing
          p.subtitle
            | In posuere eleifend odio. Quisque semper augue mattis maecenas
            | ligula.
          p
            a(href='#')
              img(src='images/pics13.jpg', alt='')
          a.button(href='#') View Jobs

还有一些 CSS:

.titlething {
  margin-top: 1em;
  margin-bottom: 0.2em;
}

/* Buttons */

.button {
  position: relative;
  display: inline-block;
  margin-top: 0.5em;
  padding: 0.5em 1.5em;
  background: #e95d3c;
  border-radius: 6px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.1em;
  color: #fff;
  -moz-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
  -webkit-transition: color 0.35s ease-in-out,
    background-color 0.35s ease-in-out;
  -o-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
  -ms-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
  transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
  cursor: pointer;
}

.button:hover {
  background: #de3d27;
  color: #fff !important;
}

#marketing {
  position: relative;
  justify-content: space-between;
}

#marketing header h2 {
  font-size: 1.6em;
}

Answer 1

可能最简单的解决方案是使标题高度始终相同。所以我的建议是：

.titlething {
  margin-top: 1em;
  margin-bottom: 0.2em;
height: 4em;
}

当然你需要调整高度参数以适合你的布局。

如何对齐 div 集合中的图像和按钮？

How to align images and button in a collection of divs?

html

css

responsive-design

pug