Created
September 26, 2013 13:34
-
-
Save Potherca/6714252 to your computer and use it in GitHub Desktop.
Adaptation of "How to vertically and horizontally center text in an unordered list or div"
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Adaptation of "How to vertically and horizontally center text in an unordered list or div" | |
* by Andy Howard | |
* | |
* Please visit the original article at: | |
* http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html | |
* | |
* This version removes some of the unneeded HTML and CSS | |
*/ | |
/* This is what makes the magic happen | |
---------------------------------------------------*/ | |
.items { | |
} | |
.outerContainer | |
{ | |
display: table; | |
height: 10em; | |
width: 10em; | |
overflow: hidden; | |
} | |
.innerContainer | |
{ | |
display: table-cell; | |
vertical-align: middle; | |
width: 100%; | |
text-align: center; | |
} | |
/* This makes things more pretty | |
----------------------------------------------------------------------------*/ | |
body | |
{ | |
background: rgb(0,139,139); | |
border: 1px solid rgb(255,255,255); | |
box-shadow: | |
-1em -1em 2em rgba(0,0,0,0.5) | |
, 1em 1em 2em rgba(0,0,0,0.5) | |
, -1em 1em 2em rgba(0,0,0,0.5) | |
, 1em -1em 2em rgba(0,0,0,0.5) | |
, 0 0 20em rgb(0,255,255) | |
; | |
border-radius: 1em; | |
width: 46em; | |
position: absolute; | |
left: -23em; | |
margin-left: 50%; | |
top: 50%; | |
margin-top: -5em; | |
} | |
.items > * | |
{ | |
float: left; | |
margin: 1em 0.25em 1em 1em; | |
background: white; | |
border-radius: 0.5em; | |
box-shadow: 0 0 0.75em white; | |
font-family: sans; | |
} | |
/* Adds highlight to emphasise how it is done | |
----------------------------------------------------------------------------*/ | |
.items:hover > * | |
{ | |
outline: 0.1em solid rgb(0,255,255); | |
} | |
.items:hover > * > * | |
{ | |
border: 0.1em solid rgb(245,0,140); | |
} | |
.items:hover > * > * > * | |
{ | |
border: 1px solid rgba(0,0,0,0.25); | |
background: rgba(0,0,0,0.1); | |
} | |
/*EOF*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<article class="items"> | |
<div class="outerContainer"> | |
<span class="innerContainer">Just one line</span> | |
</div> | |
<div class="outerContainer"> | |
<span class="innerContainer">Now on two lines, tricky</span> | |
</div> | |
<div class="outerContainer"> | |
<span class="innerContainer">Its now over three lines, its getting crazy</span> | |
</div> | |
<div class="outerContainer"> | |
<span class="innerContainer">Finally, even more than four lines but all of the code is the same for each list item!</span> | |
</div> | |
</article> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split-vertical","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