выровнять текст в середине 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

пут "Или" в <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    */ 
}