css tips and tricks

Centering div (Flex method)

(center both vertical and horizontal)

<html>
<header>
<style type="text/css">
body{
height: 100%;
}
div{
display: flex;
align-items: center;
justify-content: center;
border: 1px silver solid;
height: 100%;
}
</style>
</header>
<body>
<div>Flex content</div>
</body>
</html>

 

Remove <form> space

<form method="POST" style="display: inline;">
<button href="/note/" class="btn btn-danger">Delete<span class="glyphicon glyphicon-trash"></span></button>
</form>

 

Make the whole area of a list item clickable as a link

<ul class="list-group">
<li class="list-group-item">
<a href="#" style="display: block;">Click Me</a>
</li>
</ul>

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top