我正在努力解决标题栏中元素的对齐问题，希望有人能提供帮助!
在我的页眉中，我有一个 Logo 、一个标语和一个按钮。我还有两个社交媒体按钮，我想将它们一个叠一个。我希望所有这些都垂直居中对齐，并在这样做时做出响应——这样无论浏览器大小如何，这些元素都保持在中间并相互对齐。
让 Logo /标语/按钮对齐并没有太大问题，但是当我试图让两个堆叠的社交媒体图标成对对齐时，问题就来了 - 我希望它们对齐在按钮旁边居中。我以全宽度查看的 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 我是论坛的新手，所以希望这篇文章没问题 - 如果我遗漏了什么，请告诉我!
最佳答案
我希望，你的问题会得到解决 :)
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
//remove float:left
padding: 15px;
display: table-cell;
vertical-align:middle;
}
关于html - 标题上的居中对齐按钮(并做出响应)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47379640/