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; }
I am attempting to create floating/stacking boxes on the right side of the page as long as there is available space. I am close to achieving my desired layout, but the DIVs keep getting wrapped over each other, causing the headings to be lost. ...
Struggling to integrate material-ui for react in a wordpress plugin due to conflict with wordpress's styling in forms.css file. Looking for a solution that doesn't require complete restyling of material-ui components to override the default style ...
Here is the HTML code snippet I am working with: <div id="main_content"> <div id="left_side> <h1> MY BIG HEADER </h1> </div> <div id="content_area"> SOME CONTENT HERE SOME CONTENT HERE S ...
Currently, I am working on a webpage that will trigger an ajax call upon loading. The response data in JSON format will be processed and the elements will then be added to the DOM as shown below: $.ajax({ type: 'POST', url: "http://mysite.de ...
I'm in the process of dividing the background on my website into distinct areas. My goal is to have the patterned area extend both horizontally and vertically on either side until it reaches the edge of the visible webpage. Figuring out how to achiev ...
I have a working format available in a JS fiddle. Here is the code I have used on my demo site: I created a new folder named "js" and placed datepicker.js inside it, then linked it in my HTML like this: <script type="text/javascript" src="js/datepicke ...
Currently, I am delving into the realm of ReactJS and have embarked on a small project to enhance my skills. My main goal is to create a resizable div element that can be adjusted by dragging it across the screen. Here is the snippet of code that I have be ...
I'm struggling to figure out how to create a circular profile picture on a background image that remains responsive and maintains its position across different screen sizes. Currently, I've been using fixed margin values to adjust the position, ...
I just started learning CSS, JS, and HTML and I have a question about scaling an image based on a song. Despite searching through YouTube and various forums, I still haven't found a solution. Any help would be greatly appreciated :) Here is the HTML ...
I have a setup where the names and occupations of participants are displayed next to their artworks, and I've made it sticky so that as we scroll through the images, the names stay on the left. Now, I want the names to scroll out once the images for e ...
I'm working on arranging four squares in a grid pattern, two on top and two on the bottom, with equal spacing between them. Currently, the squares shift based on the fr value in CSS grid, resulting in uneven spacing like this: I want to align all fou ...
<ul id="verticalmenu"> <li><a href="http://www.yourlink.com/">Home</a></li> <li><a href="http://www.yourlink.com/">Vertical Menu</a></li> <li><a href="http://www.yourlink.com/">Dro ...
As I strive to incorporate a Dark Mode feature based on the user's system preferences, I utilize the @media query prefers-color-scheme: dark. While this approach is effective, I also find it necessary to conduct additional checks using JavaScript. de ...
When attempting to dynamically add YouTube videos to my React Native app, I decided to utilize a combination of WebView and iFrame due to the incompatibility of the current react-native-youtube component with RN 16+. Although this solution works, the ifram ...
Is it possible to create a 4-column responsive layout? | column left | column right | column left| column right| I would like to achieve a single row layout on larger devices as shown below | column left | column right | column left| column right| an ...
Hey there! I'm currently experimenting with Plotly to create some awesome charts, and I've been trying to figure out how to give my area-charts a gradient instead of the usual fill with opacity. This is how I typically build my graph: Plotly.ne ...
Having some trouble with HTML code... <table class="table table-condensed order-statistics"> <tr class="order-statistics-row"> <div class="row"> <div class="col-lg-4"> Order ID: </div> <div ...
Currently, I am working on creating a form with two input fields - one for text and the other for file upload. However, the issue I am facing is that the Browse button for the file input is being displayed inside the input box. My goal is to have the butto ...
In my div, I have some text that I want to hide. <div style='visibility:hidden;' id='emailid'>$email</div> Although the visibility attribute successfully hides the text, it leaves behind empty space on the webpage where th ...
I am thrilled about the introduction of container queries in CSS. It's great to see this feature now available across all browsers. However, I have encountered an issue when working with multiple consecutive containers and placing an absolutely positi ...