[英]align text and images within a div
我有这个div,其中有一个<h1>
元素和两个社交媒体图标。 我想将它们与h1
并排垂直排列,并以图标为中心。 我希望这以其div为中心。 这是我的codepen 。
.social-section { position: relative; float: left; top: 50%; left: 50%; transform: translate(-50%, -10%); } .social-section>h1, .social-section>div { float: left; width: 50%; } .social-section>h1 { vertical-align: center; }
<div class="social-section"> <h2>Follow us </h2> <a href src="/"><img src="https://cdn7.bigcommerce.com/s-vbmsnb3b18/product_images/uploaded_images/fb-logo.png" /></a> <a href src="/"><img src="https://cdn7.bigcommerce.com/s-vbmsnb3b18/product_images/uploaded_images/instagram.png" /></a> </div>
我在这里想念什么? 有一些简单的方法可以遵循吗? 我似乎总是很难整理元素
尝试利用Flexbox
display:flex
将使flex项目(子元素)并排对齐。 align-items: center
对齐项目垂直居中 justify-content: center
对齐项目水平居中 堆栈片段
.social-section { position: relative; display: flex; align-items: center; justify-content: center; }
<div class="social-section"> <h2>Follow us </h2> <a href src="/"><img src="https://cdn7.bigcommerce.com/s-vbmsnb3b18/product_images/uploaded_images/fb-logo.png" /></a> <a href src="/"><img src="https://cdn7.bigcommerce.com/s-vbmsnb3b18/product_images/uploaded_images/instagram.png" /></a> </div>
只需在display:inline-block
设置元素
vertical-align:middle
提供元素垂直居中
.social-section { text-align:center; } .social-section > *{ display:inline-block; vertical-align:middle; }
<div class="social-section"> <h2>Follow us </h2> <a href src="/"><img src="https://cdn7.bigcommerce.com/s-vbmsnb3b18/product_images/uploaded_images/fb-logo.png" /></a> <a href src="/"><img src="https://cdn7.bigcommerce.com/s-vbmsnb3b18/product_images/uploaded_images/instagram.png" /></a> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.