Question

我想在两个中间边框的中间对齐“或” 我还想将右侧按钮中的小图像对齐到按钮的左侧

这里是小提琴链接：

<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>

Answer 1

在span中添加“或”字词，并使用此css将or或类应用于该字段：

.or {
    left: -7px;
    position: relative;
    top: -5px;
}

请参阅：http://jsfiddle.net/J82cD/3/

Answer 2

DEMO

将“或”放在<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               */
}

在div的中间对齐文本并在按钮中对齐小图像

2 个答案: