Question

我正在努力解决标题栏中的项目对齐问题，并希望有人可以提供帮助！

在我的标题中，我有一个徽标，标语和一个按钮。我还有两个社交媒体按钮，我希望将它们叠在一起。我希望所有这些都能在垂直方向上对齐，以便在这样做时做出响应 - 这样无论浏览器大小如何，这些元素都保持在中间并且彼此对齐。

我没有太多的麻烦让徽标/标语/按钮对齐，但当我试图让两个堆叠的社交媒体图标将它们自己对齐时，麻烦来了 - 我希望它们对齐与Button一起居中。我在全宽范围内查看的JS编辑应该让我知道我的意思...我能管理的最好的是使用边距设置，只要浏览器是完整尺寸但只要你调整到更小的宽度就看起来很好，他们开始不对齐，所以它对我没有真正的反应。

我已经搜索并尝试了大量的解决方案，其中没有一个似乎工作得太好了。我尝试了各种显示设置，使用隐形占位符和包装div，到目前为止似乎都没有。

所以问题是 - 如何在不考虑浏览器大小的情况下使所有这些标题项垂直对齐 - 并保持两个社交图标堆叠。我不禁觉得这应该是一个简单的“啊哈”时刻： - ）

几个笔记 -

标题栏需要具有粘性和响应性（因此这会导致使用绝对值的问题）
我为Button和Social使用按钮（而不仅仅是img）的原因是因为在我的完整代码中，我使用了背景图像/类来应用悬停效果。
当您调整浏览器大小时，您将看到Button最终开始与社交媒体图标重叠 - 这不是问题，因为我在完整代码中添加了一个断点，以便在它达到此最小宽度之前无论如何它会改变布局。所以我的问题只关系到它在这个断点之前的样子。

我把代码放在JSFiddle上： https://jsfiddle.net/dskof/xett67qw/

这绝不是我的完整代码 - 只是一个简单的副本，试图说明我遇到问题的部分。

为方便起见，下面的代码如下：

CSS

* {
box-sizing: border-box;
margin: 0;
font-family: 'Ubuntu', sans-serif;

}

.row::after {
content: "";
clear: both;
display: table;
}

[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #ffffff;
border-bottom: 1px solid #008e70; 
}

button {
border: none;
padding: none;
display: block;
margin: auto;
outline: none; 
}

.button {

background-image: url(https://image.ibb.co/jPk7tR/button_test.png);
background-color: transparent;
width: 140px;
height: 140px;
display: block;
background-repeat: no-repeat;
background-size: contain;
max-width: 100%;
background-position: center center;
min-width: 120px;
}

.facebook {
margin-top: 13%;
background-image: url(https://image.ibb.co/eqQ7tR/fb_box.png);
background-color: transparent;
width: 50px;
height: 50px;
display: block;
float: right;
clear: both;
background-size: contain;
background-repeat: no-repeat;
}

.twitter {
background-image: url(https://image.ibb.co/cNg2Sm/twitter_box.png);
background-color: transparent;
width: 50px;
height: 50px;
display: block;
background-size: contain;
background-repeat: no-repeat;
float: right;
clear: both;
}

HTML：

<body>

<div class="row sticky">

<div class="col-3">
<img src="https://image.ibb.co/hKWQf6/logo_test.png" style="max-width: 100%;">
</div>

<div class="col-6"> 
<img src="https://image.ibb.co/mTzp7m/tagline_test.png" style="max-width: 100%;">
</div>

<div class="col-2"> 
<button class="button"></button>
</div>

<div class="col-1"> 
<button class="facebook"></button>
<button class="twitter"></button>
</div>

</div>

<section>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus malesuada iaculis. Nullam dapibus semper iaculis. In eu magna non lectus tempor scelerisque. Quisque dapibus sed risus a tempor. Nulla sem mi, elementum eget est et, vehicula tristique quam. Vivamus id sapien id justo ornare vulputate in vitae turpis. Nullam leo nulla, aliquam non felis a, lacinia rhoncus nunc. Vivamus eu arcu lectus. In consectetur non ipsum ac lobortis. Praesent finibus est vel enim sollicitudin molestie. Nunc ante mauris, sollicitudin lacinia sem placerat, consequat dignissim leo. Phasellus ac sapien risus. Integer cursus justo sit amet consequat facilisis. Donec a ultricies tellus, sed fringilla tortor. Quisque vehicula quis arcu nec congue.

In varius urna quam, sed congue odio commodo sed. Nullam ut vestibulum     nulla. Sed tempus placerat pellentesque. Suspendisse maximus ut tortor nec ullamcorper. Aliquam vitae nibh in mauris iaculis molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu nisi luctus, tristique nunc eu, fringilla metus. Phasellus gravida ultricies felis ut aliquam. Curabitur hendrerit, diam elementum finibus venenatis, velit elit ultrices arcu, at laoreet diam leo at lorem. Praesent fermentum euismod orci vel tristique. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin euismod nibh sed sem feugiat, nec auctor nisl tristique. Sed molestie metus orci, ac consequat nisl varius a. Duis vel laoreet nibh. Quisque egestas elit eu dolor scelerisque, vel      fringilla quam mollis.

</div>
</section>
</body>

提前谢谢！丹尼尔

PS我是论坛的新手，所以希望这篇文章没问题 - 如果我遗漏了任何内容，请告诉我！

Answer 1

您可以使用 display：table;并显示：table-cell; vertical-align：middle; 。

添加显示：表;宽度：100％;你的div.row，
移除浮子：左;来自你的.col
然后添加它们显示：table-cell; vertical-align：middle;

所以，你会有这样的事情：

.row {
display: table;
width: 100%;
}

[class*="col-"] {
display: table-cell;
vertical-align: middle;
padding: 15px;
}

Answer 2

我希望，你的问题将得到解决：）

.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    //remove float:left
    padding: 15px;
    display: table-cell;
    vertical-align:middle;
}

中心对齐标题上的按钮（并使响应）

2 个答案: