Help on using Vertical-center and horizontal-center helpers
13 views
Skip to first unread message
beekay
Nov 30, 2010, 7:22:33 AM11/30/10
to Elastic CSS Framework
Hi,
I have been playing with elasticss for my upcoming site and so far I
loved your approach. However, I often have a need to center content
both horizontally and vertically. I tried using horizontal-center and
vertical-center. But somehow its not working out for me. Here's a
simple html where I am trying to horizontally center menu-item and
vertically center content within them. I am sure I am doing something
wrong. So can you please help me understand centering guidelines.
Note : In this case I am vertically centering the content. Can I
vertically center a container or a column?
<!DOCTYPE html
<html>
<head>
<title>Pulse</title>
<link href="/stylesheets/elastic.css?1260164340" media="screen"
rel="stylesheet" type="text/css"/>
<link href="/stylesheets/elastic.print.css?1260164340"
media="screen" rel="stylesheet" type="text/css"/>
<script src="/javascripts/elastic.js?1260164340" type="text/
javascript"></script>
<style type='text/css'>
/*<![CDATA[*/
html, body {
padding: 0;
height: 100%;
overflow: hidden;
background: white;
width: 100%;
margin: 0 auto;
color: black;
}
.header {
background-color: white; /*height:60px;*/
color: black;
border-bottom: 2px solid green;
}
#top_menu .top_menu_item {
background-color: green;
height: 50px;
width: 100px;
color: white;
margin: 0 2px;
font-size: 16px;
text-align: center;
}
/*]]>*/
</style>
<div class='unit' style='width:960px;margin:0 auto;'>
<div class='columns horizontal-center header' id='top_menu'>
<div class='column vertical-center'>
<div class='container top_menu_item'>Home</div>
</div>
<div class='column'>
<div class='container top_menu_item'>Customers</div>
</div>
</div>
</div>
</head>
</html>
I have been playing with elasticss for my upcoming site and so far I
loved your approach. However, I often have a need to center content
both horizontally and vertically. I tried using horizontal-center and
vertical-center. But somehow its not working out for me. Here's a
simple html where I am trying to horizontally center menu-item and
vertically center content within them. I am sure I am doing something
wrong. So can you please help me understand centering guidelines.
Note : In this case I am vertically centering the content. Can I
vertically center a container or a column?
<!DOCTYPE html
<html>
<head>
<title>Pulse</title>
<link href="/stylesheets/elastic.css?1260164340" media="screen"
rel="stylesheet" type="text/css"/>
<link href="/stylesheets/elastic.print.css?1260164340"
media="screen" rel="stylesheet" type="text/css"/>
<script src="/javascripts/elastic.js?1260164340" type="text/
javascript"></script>
<style type='text/css'>
/*<![CDATA[*/
html, body {
padding: 0;
height: 100%;
overflow: hidden;
background: white;
width: 100%;
margin: 0 auto;
color: black;
}
.header {
background-color: white; /*height:60px;*/
color: black;
border-bottom: 2px solid green;
}
#top_menu .top_menu_item {
background-color: green;
height: 50px;
width: 100px;
color: white;
margin: 0 2px;
font-size: 16px;
text-align: center;
}
/*]]>*/
</style>
<div class='unit' style='width:960px;margin:0 auto;'>
<div class='columns horizontal-center header' id='top_menu'>
<div class='column vertical-center'>
<div class='container top_menu_item'>Home</div>
</div>
<div class='column'>
<div class='container top_menu_item'>Customers</div>
</div>
</div>
</div>
</head>
</html>
Reply all
Reply to author
Forward
0 new messages