Heres how to make responsive circles using CSS3, margin is not necessary, but this allows for vertical aligning to also be altered.
Styles:
.circle {
postions:relative;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 50%;
display: table;
margin:10px auto 0;
padding: 30% 10%;
}
.logo {
margin:0 auto;
background:red;
}
.logotext {
text-align:center;
margin: auto 0;
color:#ffffff;
}
Example usages, in Jquery Bootstrap Twitter:
<div class="row">
<div class="span3 offset4">
<div class="logo circle">
<div class="logotext">
Test Logo
</div>
</div>
</div>
</div>
This will allow you to achieve such things as this:
No comments:
Post a Comment