在div中間對齊文本並在按鈕中對齊小圖像

Question

我想在兩個中間邊框中間對齊單詞「或」 並且我還想將右側按鈕中的小圖像對齊到離開了他們的按鈕

這裏是小提琴鏈接：

http://jsfiddle.net/J82cD/

<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 { 
    left: -7px; 
    position: relative; 
    top: -5px; 
} 

參見：http://jsfiddle.net/J82cD/3/

Answer 2

DEMO

put 「或」 在<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    */ 
}