Similar Question:
What is the Optimal Method for Vertically Centering a Div with CSS?
.title_text_only{
position:absolute;
width:100%;
display:none;
z-index:9;
top:50%;
bottom:50%;
text-align:center;
color:#fff;
font-size:18px;
text-shadow: 1px 1px 1px #666;
}
Currently, it appears to not be functioning correctly. The top 50% does not align it vertically. It is slightly positioned towards the bottom. It seems like the top margin is set at 50%.
If you want to set the height of the box, one option is to use margin-top: -[height / 2]px (simply substitute [height / 2] and keep in mind that some browsers may round fractional pixels up at 100% zoom).
If you are able to specify the height of the parent element, you can try something like this:
parent {
height: [height]px;
}
child {
/* Ensure the element is part of the inline flow, since vertical-align does not work on block elements */
display: -moz-inline-box; /* Old Firefox lacks support for inline-block */
display: inline-block;
/* For IE < 8 which doesn't support inline-block on native block-level elements */
*display: inline;
*zoom: 1;
/* The important part */
line-height: [height]px;
vertical-align: middle;
}
If the child's content is likely to wrap onto multiple lines, consider wrapping it in a sub-child that resets the line-height.
top: 50%; positions the top boundary at 50% of the height. To counteract this, you can include a negative vertical margin that is half the height of the element. So, if the element is 100px tall, you would use:
margin-top: -50px;
If the size of the element is fixed, you can use the following CSS:
CSS:
.title_text_only{
position:absolute;
width:100%;
display:none;
z-index:9;
**top:50%;**
bottom:50%;
text-align:center;
color:#fff;
font-size:18px;
text-shadow: 1px 1px 1px #666;
**margin-top: -(half the height)**
}
Alternatively, if you need to vertically center a div with dynamic height, JavaScript can be used:
document.getElementById('myElement').style.marginTop = (-1) * document.getElementById('myElement').offsetHeight / 2
I'm trying to use an icon from FontAwesome in the placeholder of an input field. Here is my code snippet: <input type="password" name="password" placeholder=" Password"> However, when I view it on the screen, it appear ...
In my Vue component, there is a class called "tab-body-wrapper" that serves the purpose of displaying the "slot" for the active tab. However, I encountered an issue while troubleshooting where the height of the ".tab-body-wrapper" component reduces during ...
I've come across various Style Guides that discuss declaration and attribute ordering, but surprisingly none that specifically address class ordering. For instance, one developer's code looks like this: <div class="btn btn-primary btn-lg mt- ...
I'm currently working on creating a grid component in Vue to set up a sortable and searchable chart using Single File Component. I've also integrated vue-router into the project. Below are my two .vue files. At the moment, I can only see the sear ...
I am working with a table that has multiple rows, and my goal is to make the border of a row extend over other rows when it is expanded. Refer to the image below for a visual representation. I am utilizing Bootstrap 5 and JQuery for this task. I have creat ...
Hello there and thanks in advance. I've recently delved into the world of HTML and CSS and I'm currently in the process of building my own website. I've encountered an issue with a div container where I'm utilizing Bootstrap elements. T ...
As a beginner, I am in the process of creating a web page that features a consistent background image. However, I have encountered an issue where the scroll bar does not appear on a specific page called "family details" due to the background image. I atte ...
I have a set of code below that has been functioning well for a single input field. However, I also have additional code that adds extra fields to the form when a div with id #addForm is clicked, and these inputs are named "itemName[]". <script> ...
I'm currently trying to wrap my head around Vuex, but as I'm still new to the world of VueJS, I'm finding it difficult to grasp. As a result, I'm on the hunt for an alternative solution. My goal is to efficiently share data between tw ...
I am having an issue running a Python CGI script to send data to a serial port. Whenever I try to open and set the serial port to a variable, the HTML server crashes. Below is the code snippet that receives a color (red, blue, green) from the HTML page: ...
EmberJS has captured my interest and I am thoroughly enjoying diving into it. Although there is a learning curve, I truly believe in the meaningful principles it stands for. I am curious about the process of making GET and POST calls in Ember JS. While I ...
I attempted it in this way: <script type="text/javascript"> $(document).ready(function () { $('#divID').hide(); $('#txtInsertComments').Onfocus(function () { $('#divID').show(); }); }); </script> //Asp.net ...
Having an unordered list with the id mainul in the navigation bar is causing a problem when the page reloads. The navigation bar always starts at the beginning, but I would like it to automatically scroll to the active li element. This is my HTML code: & ...
$valueArr=htmlspecialchars(json_encode($event), ENT_QUOTES, 'UTF-8'); The data json_encode($valueArr) is being sent from <a href="javascript:void(0)" id="event_<?=$event->event_id?>" onclick='getDetailsEvent(<?php echo $v ...
I'm currently working on a horizontal menu using CSS and JavaScript with multiple levels. I've implemented a toggle function to show the submenu container, but it's causing the links below it to be pushed down. Is there a way to make the dis ...
I'm currently working on a script that is intended to retrieve the element positioned at the cursor's location within an iframe. The code I am attempting to implement should be able to identify the deepest child element at the cursor's posit ...
Every time I try running gulp serve, I encounter the following issue: Error: Unable to locate module '@rushstack/module-minifier-plugin' Please assist me with this problem. Thank you! ...
Check out the default UI from MUI-Datatables v4.3.0 here: https://i.stack.imgur.com/rbHgD.png I want to create a style similar to this: https://i.stack.imgur.com/AUHqC.png Just so you know, I am using the following packages: "@mui/material": &q ...
Within the div, there is text with a 5px margin on the right. When the container div narrows, the text overflows from the container and loses the right margin. Is it feasible to maintain this margin on the right side while allowing the text to overflow fro ...
I am struggling to identify the issue with this code snippet (http://jsfiddle.net/resistdesign/s6npL/). Despite referencing the documentation and some examples, the lights don't seem to be functioning as expected. var camera, scene, renderer, geometr ...