Similar Question:
Issue with vertical alignment
Is there a way to ensure that the <a></a> is always vertically centered within this div, regardless of its size?
Thank you!
Similar Question:
Issue with vertical alignment
Is there a way to ensure that the <a></a> is always vertically centered within this div, regardless of its size?
Thank you!
To achieve a centered layout using the display:table and display:table-cell properties, which are supported by all modern browsers including IE 8 and above:
.content {
width: 200px;
height: 200px;
background: rgba(0,0,0,0.8);
display: table;
}
.content h2 {
text-align: center;
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.content h2 a {
color: #f7f7f7;
font-size: 2.2em;
font-weight: normal;
font-style: italic;
width: 100%;
}
I decided to try a different approach just for fun, and surprisingly it worked! Check out the code on jsFiddle.
The trick involves using a :before pseudo-element with 50% height.
html, body{
height:100%;
}
.post {
width: 400px;
height: 300px;
background: rgba(0,0,0,0.8);
}
.post h2:before{
content:"";
display:block;
height:50%;
}
.post h2 {
text-align:center;
height:100%;
}
.post h2 a {
color: #f7f7f7;
font-size: 2.2em;
margin-top:-20px;
display: block;
}
I hope this alternative method helps you achieve your goal!
To ensure your link is vertically aligned in the middle, give it a line-height that is larger than the text itself. Then, position its parent absolutely within the div by setting top: 50% and adjusting the margin top to offset half of the link's line-height:
Check out the example on jsFiddle
.post {
position: relative;
}
.post h2 {
text-align: center;
width: 100%;
position: absolute;
top: 50%;
margin-top: -150px;
}
.post h2 a {
vertical-align: middle;
line-height: 300px;
white-space: nowrap;
}
This method even works smoothly in IE7.
[UPDATED]
You could try a different approach by visiting this jsFiddle link for reference.
.post {
width: 400px;
height: 200px;
background: rgba(0,0,0,0.8);
position:relative;
}
.post h2 {
position:absolute;
top:50%;
width:100%;
text-align:center;
}
.post h2 a {
line-height:100%;
color: #f7f7f7;
font-size: 2.2em;
margin-top:-20px;
display: block;
}
To easily align content vertically in HTML, you can add an extra HTML class and use the vertical-align: middle property.
Check out this JSFiddle link for a demonstration
<div class="post">
<span></span><h2><a href="#">Hello!</a></h2>
</div>
Here is the CSS code:
* { margin: 0; padding: 0; }
.post {
background: rgba(0,0,0,0.8);
width: 200px;
height: 200px; }
.post span {
height: 100%;
vertical-align: middle;
display: inline-block; }
.post h2 {
position: relative;
text-align: center;
width: 100%;
vertical-align: middle;
display: inline-block; }
.post h2 a {
color: #f7f7f7;
font-size: 2.2em;
font-weight: normal;
font-style: italic;
display: block; }
Looking to create a main menu with dropdown items that appear when the user hovers over them? You may have noticed that typically, the dropdown disappears once the hover event is lost. But what if you want the menu to stay visible and only disappear upon c ...
I have a component where I am trying to dynamically change the color based on the user type. The issue arises when I use gradient colors, as the transition stops working. If I stick to simple colors like blue, red, or green, it works fine. Currently, the c ...
I am currently working on creating a fixed header that remains at the top of the page. However, I am facing an issue where the background seems to be overlapping and hiding the header. <style type="text/css> html, body {height:100%; margin:0; paddin ...
I have implemented the following HTML code snippet: <select ...> <option value=""></option> <option data-ng-repeat="type in xy" value="{{type.name}}" ng-style="{'border-left': '4px solid '+ type.color, &apos ...
Recently, in my coding class, we were tasked with creating a program that would display images of dice and generate random numbers when the refresh button was clicked. To practice using querySelector and setAttribute, I decided to expand on the lesson by i ...
When a user selects a value in my mat select, it doesn't display well in the selection box. The text wraps when the selection is opened, but once a choice is made, it gets cut off without proper spacing between the ellipses and the dropdown arrow. Th ...
My component generates HTML for a simple bar chart, with the height and background color computed within the component. Everything functions correctly, but I am facing an issue where long text causes displacement of the bar above it. Another problem is th ...
Running a MediaWiki site with a personalized skin, I've noticed that the CSS code from my custom skin is being overshadowed by the default MediaWiki CSS. Is there a way to modify the sequence in which the CSS code is loaded? ...
--How can I adjust the spacing of the buttons?--The animations are working, but I need to create some padding between them-- I want all buttons to stay on the same line but with a little more space between each one--I'm still relatively new to this, s ...
Currently, I am tackling a beginner node.js server project. While I have successfully managed to render dynamic HTML using ejs templates, I seem to be facing difficulties when it comes to linking CSS styling to these templates. In an effort to address thi ...
Currently, I am working on a project offline and trying to make Brackets' live preview feature work smoothly. It has proven to be quite convenient for my tasks. While opening my project files using the "open file" option in Brackets, I encountered an ...
After reading a discussion on dropdown menu issues on a popular forum, I am still unable to locate the error on my website: . The submenu on the main top menu is not functioning as it should. My attempt to resolve the problem by changing the overflow sett ...
I am trying to achieve the following: $('.class.img').css('cellpadding', variable); However, this code does not seem to be working as expected. Despite searching online, I have not been able to find a solution. Any assistance on how to ...
Check out my js fiddle below: https://jsfiddle.net/9yj63s3f/ Here is the CSS code snippet: .viddiv{ float:left; width:50%; } .vidholder{ position:relative;height:0;padding-bottom:50%; width:50%; float:left; } iframe{ position:abso ...
My attempt to set the height of a div element to 70% using CSS3's calc() function has been unsuccessful. While specifying viewport height (70vh) works, I specifically need the height to be 70%. .scroll-inner-container { height: -moz-calc(70vh + 0 ...
I am exploring the use of Style JSX within a Next JS application to customize AntD components, with a focus on customizing the appearance of the sidebar (specifically using Style JSX to modify AntD's Sider component). Below is a snippet of the code I ...
When working with the following HTML structure: <div> <span class="style-me">i want to be styled</span> </div> <div class="ignore-my-descendants"> <span class="style-me">i want to be styled but my parent prevent ...
Currently, I am working on implementing a parallax effect that involves having one image nested inside another, both of which will move at different speeds. My progress has been somewhat successful, however, the effect seems to only work on screens narrowe ...
I'm working on a project that includes the following code snippet: body { background-color: #312a50; font-family: Helvetica Neue; color: white; } html, body { height: 100%; } .main { height: 100%; width: 100%; display: table; } .wr ...
I have designed custom drop down menus that consist of one <div> containing the current value and functioning as a <select> field, with another <div> below it that appears when the top one is clicked, displaying all the <option> val ...