Skip to content

Instantly share code, notes, and snippets.

@jcubic
Last active October 11, 2015 02:57
Show Gist options
  • Save jcubic/3791752 to your computer and use it in GitHub Desktop.
Save jcubic/3791752 to your computer and use it in GitHub Desktop.
Center text
.wrapper {
clear: both;
margin: 0 10px;
background: red;
float: left;
width:100%;
}
.wrapper .block {
text-align: left;
width: 25%;
float: left;
text-align: center;
}
.wrapper .block b, .wrapper .block a {
float: left;
}
<div class="wrapper">
<div class="block">
<b>Relative:</b>
<a class="link">All</a>
<a class="link">Newest</a>
<a class="link">Popular</a>
</div>
<div class="block">
<b>Gender:</b>
<a class="link">Both</a>
<a class="link">Male</a>
<a class="link">Female</a>
</div>
<div class="block">
<b>View:</b>
<a class="link">
<img src="http://vt.mu/geoff/centerfilters/view-1.png"></a>
<a class="link"><img src="http://vt.mu/geoff/centerfilters/view-2.png"></a>
<a class="link"><img src="http://vt.mu/geoff/centerfilters/view-3.png"></a>
</div>
<div class="block">
<b>Type:</b><a class="link">All</a>
<a class="link">Solo</a>
<a class="link">Band</a>
<a class="link">Group</a>
</div>
</div>
<div class="wrapper">
<div class="block" id="nou"><b>Relevantes:</b><a class="link">Todos</a><a class="link">Nuevos</a><a class="link">Popular</a></div>
<div class="block"><b>Género:</b><a class="link">Ambos</a><a class="link">Hombre</a><a class="link">Mujer</a></div>
<div class="block"><b>Vista:</b><a class="link"><img src="http://vt.mu/geoff/centerfilters/view-1.png"></a><a class="link"><img src="http://vt.mu/geoff/centerfilters/view-2.png"></a><a class="link"><img src="http://vt.mu/geoff/centerfilters/view-3.png"></a></div>
<div class="block"><b>Tipo:</b><a class="link">Todos</a><a class="link">Solo</a><a class="link">Banda</a><a class="link">Groupo</a>
</div>
</div>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment