[英]align text in the middle of a div and align small images in button
我想在两个中间边框的中间对齐单词“或”,我也想将我的右按钮中的小图像对齐到其按钮的左侧
这是小提琴链接:
<div class="border"></div>Or<div class="border"></div>
</div>
<div class="social_p">Sign in using your social account</div>
<button type="image" class="social_f"><img src="images/sign-up_facebook.png" align="left">Sign in With my Facebook</button>
<button type="image" class="social_g"><img src="images/sign-up_google.png" align="left">Sign in With my Google</button>
在span
添加“或”一词,并使用以下CSS将or应用于其:
.or {
left: -7px;
position: relative;
top: -5px;
}
参见: http : //jsfiddle.net/J82cD/3/
像这样在<span>
放入“或”:
<div id="middle">
<div class="border"></div>
<span class="center">Or</span>
<div class="border"></div>
</div>
并使用以下样式:
span.center {
display: inline-block;
width: 30px; /* or something else */
text-align: center;
margin-left: -15px; /* half of width */
}
为您的按钮添加以下样式:
button{ position:relative; }
button img {
position:absolute;
left:2px;
top:50%;
height:20px; /* as the height of your icons */
margin-top:-10px; /* half of height */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.