垂直对齐div中的两个元素
[英]Vertically align two elements in a div
问题描述
我正在尝试垂直对齐下面的这两个“容器”（黑色和蓝色），例如，距离A应该与B相同。我已经尝试使用top或below ，但它不是响应。 有没有其他方法可以做到这一点，仍然有Facebook图标居中（由于某种原因，这不是以Safari为中心，但与Chrome一起工作得很好）？
码
.content { background: yellow; padding-top: 40px; padding-bottom: 40px; } .black-container { background: black; display: flex; } .social-button { display: flex; justify-content: center; width: 40px; height: 40px; font-size: 16px; background: white; border: none; border-radius: 50%; } .blue-container { background: blue; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container content"> <div class="row"> <div class="black-container col-xs-6"> <button type="button" name="button" class="social-button"><i class="icon-social-facebook"></i></button> <button type="button" name="button" class="social-button"><i class="icon-social-facebook"></i></button> </div> <div class="blue-container col-xs-6 text-right"> <p>testing <a href="">TEST</a> testing</p> </div> </div> </div>
3 个解决方案
解决方案1
4 已采纳 2017-08-17 06:20:24
只需为您的行使用flexbox，并且不要忘记为跨浏览器添加前缀
.content { background: yellow; padding-top: 40px; padding-bottom: 40px; } .row { /* Safari 6.1+ */ display: -webkit-box; /* IE 10 */ display: -ms-flexbox; /* standard*/ display: flex; /* Safari 6.1+ */ -webkit-box-align: center; /* IE 10 */ -ms-flex-align: center; /* standard*/ align-items: center; } .black-container { background: black; display: flex; } .social-button { display: flex; justify-content: center; width: 40px; height: 40px; font-size: 16px; background: white; border: none; border-radius: 50%; } .blue-container { background: blue; }
<html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container content"> <div class="row"> <div class="black-container col-xs-6"> <button type="button" name="button" class="social-button"><i class="icon-social-facebook"></i></button> <button type="button" name="button" class="social-button"><i class="icon-social-facebook"></i></button> </div> <div class="blue-container col-xs-6 text-right"> <p>testing <a href="">TEST</a> testing</p> </div> </div> </div> </body> </html>
解决方案2
2 2017-08-17 06:20:14
尝试使用Flexbox并删除display:flex from black-container和social-button
.content { background: yellow; padding-top: 40px; padding-bottom: 40px; } .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .black-container { background: black; } .social-button { width: 40px; height: 40px; font-size: 16px; background: white; border: none; border-radius: 50%; } .blue-container { background: blue; color: #fff; } .blue-container p { padding: 10px 0; margin:0; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container content"> <div class="row row-eq-height"> <div class="black-container col-xs-6"> <button type="button" name="button" class="social-button"><i class="icon-social-facebook"></i></button> <button type="button" name="button" class="social-button"><i class="icon-social-facebook"></i></button> </div> <div class="blue-container col-xs-6 text-right"> <p>testing <a href="">TEST</a> testing</p> </div> </div> </div>
解决方案3
2 2017-08-17 06:21:24
可能是为行定义一个flexbox。 我为此创建了一个单独的类，并将其添加到具有类.row的div中
.content { background: yellow; padding-top: 40px; padding-bottom: 40px; } .row.black-n-blue { display: flex; align-items: center; } .black-container { background: black; display: flex; } .social-button { display: flex; justify-content: center; width: 40px; height: 40px; font-size: 16px; background: white; border: none; border-radius: 50%; } .blue-container { background: blue; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container content"> <div class="row black-n-blue"> <div class="black-container col-xs-6"> <button type="button" name="button" class="social-button"><i class="icon-social-facebook"></i></button> <button type="button" name="button" class="social-button"><i class="icon-social-facebook"></i></button> </div> <div class="blue-container col-xs-6 text-right"> <p>testing <a href="">TEST</a> testing</p> </div> </div> </div>
如何垂直对齐 div 中的两个或多个（并排）元素？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.