时间戳

首页 > 解决方案 > 如何对齐 div 集合中的图像和按钮？

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

问题描述

我对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;
}

标签： htmlcssresponsive-designpug

解决方案

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

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

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

推荐阅读