Skip to content

Instantly share code, notes, and snippets.

@Retrockit

Retrockit/button-alignment-test.markdown

Created January 11, 2025 19:54
Show Gist options
  • Save Retrockit/a41a48064bc9f6b9e32c342542cf4360 to your computer and use it in GitHub Desktop.
Save Retrockit/a41a48064bc9f6b9e32c342542cf4360 to your computer and use it in GitHub Desktop.
Download ZIP
Button Alignment Test
Raw
index.html
<body>
<div class="bg-gray-800">
<div class="image-container">
<img src="https://firstcomeflowers.typepad.com/.a/6a012877361374970c019104a7a25d970c-pi">
</div>
<div class="button-container">
<button class="btn btn-primary">Button</button>
</div>
</div>
</div>
</body>
</html>
Raw
style.css
.bg-gray-800 {
background-color: #2d3748; /* Tailwind's gray-800 color */
}
.image-container {
height: 100vh; /* Full viewport height */
display: flex;
align-items: center; /* Vertical alignment */
justify-content: center; /* Horizontal alignment */
}
.button-container {
height: 100vh; /* Full viewport height */
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
}
.btn {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.btn-primary {
background-color: #3182ce; /* Tailwind's blue-500 color */
color: white;
border: none;
border-radius: 0.375rem;
}
.btn-primary:hover {
background-color: #2b6cb0; /* Tailwind's blue-600 color */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment