Many methods for this are workarounds or hacks that break other elements or don't work on some browsers. However, you can do this quite simply using flex.
For example:
html
<body>
<div id="menubox">
<ul id="menu">
<li>menu item 1</li>
<li>menu item 2</li>
<li>menu item 3</li>
</ul>
</div>
</body>
css
#menubox {
position:absolute;
display:flex;
flex-direction: column;
width:15rem;
height:100%;
}
#menu {
list-style:none;
margin: auto 0;
}
Concept:
Staggered animation to create a slideshow from pure CSS and HTML5
Demo
The CSS:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
animation-delay: 2s;
}
div#two {
animation: mymove 5s infinite;
animation-delay: 5s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
And the HTML:
<div id="one"></div>
<div id="two"></div>
Today I found myself in need of a blog icon and to my dismay I dont have a standardized blog icon in my art portfolio and to my surprise no such official blog icon exists. Well this just won't do, I thought. So I sat down, well in fact I was already sitting but that's not the point... *cough* OK. so I'm sitting down and thinking.. well here I will just explain the thought process in creating the icon:
Have a main focal point, it should be green to represent the fact that blogs do not require cutting down trees for paper, such as newspapers and magazines. It is estimated that 15 billion trees are cut down for paper each and every year.
Representation of bloggers, It should represent the many viewpoints, colors and cultures of bloggers around the planet. It is estimated that the number of blogs in existence as I write this article is around 320 Million and the number of posts written per day are in excess of 4.5 Million.
b for blog, what holds us together is communication. Blogs provide a great way to express yourself, communicate, give examples and share what matters with the world.
Here is the blog icon for anyone and everyone to use:
Notes:
Today is the launch of new site for Moskowitz LLP. The new design uses reactive design concepts, not to be confused with adaptive design which generally folds up on itself as you re-size the screen or switch devices.
Moskowitz LLP is an international tax law firm located in the financial district of San Francisco, California. Steve Moskowitz is the Senior Partner and Lead tax Attorney at the firm. The full team at Moskowitz LLP has impressive experience in tax law and related services.
Site information:
Code: HTML5, CSS3, JS, ASP.Net, Perl
The desktop layout:
Here is the same site on mobile:
If you're looking for a new site design or marketing for your law firm or business, give me a call to discuss your next project: 507 358-4242
In order to target a div you can do so by id or by class, for example
<div id="centerme" class="centerit">some content</div>
here is the css:
#centerme {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* in some cases you may want to give it a width and height first */
height:100%;
max-height: 10rem;
width: 100%;
max-height: 20rem;
}
/* another option only vertical via class rather than id */
.centerit {
top: 50%;
transform: translateY(-50%);
}
/* or only horizontal */
.centerit {
left: 50%;
transform: translateX(-50%);
}
That's it!