The vertical-align property in CSS seems to be malfunctioning

Hi there, I'm struggling with the CSS code below:

.parent
{
    position : 'absolute';
    top : '50px';
    left : '50px';
    width : '400px';
    height : '160px';
    padding : '10px';
    border : '2px solid';
    border-color : '#444444';
    background-color : '#FF0000';
    text-align : 'center';
    /*display : inline; tried this also and didn't work.*/
}

.child
{
    color : '#123456';
    font-size : '16px';
    font-family : 'Arial';
    vertical-align : 'middle';
}

I'm trying to center the child's content both horizontally and vertically within the parent div, but it seems to only align at the top of the parent element. Any suggestions on how to achieve this? Thank you.

htmlcsstext-align

Answer №1

vertical-align can be misleading, as it doesn't actually align elements in a strictly vertical manner.

If you have a single line of text within a container, you can achieve centering using the line-height property like this:

.container {
    line-height: 180px; /* Height of the container */
}

Example: http://jsfiddle.net/uUEzT/

Alternatively, you can simulate table-like behavior to vertically center content:

.container {
    display: table;
}

.content {
    display: table-cell;
    vertical-align: middle;
}

Example: http://jsfiddle.net/uUEzT/3/

Answer №2

Remove the quotation marks from your CSS property values and include line-height: 160px; in .parent

Answer №3

For this specific scenario where the width is 400 and the height is 160, to find the center of the div, divide the width by 2 and the height by 2 separately. The result will give you the center point of the div.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for keeping certain webpages from showing up in Google search results

I recently launched a website that allows users to create their own profiles. The problem is, when someone links to their profile from their website or blog, it ends up showing in Google searches for my site. Unfortunately, the only person who has done thi ...

html

Is it necessary to have uniform spacing between links in a responsive navigation menu?

I am attempting to create a horizontal menu navigation system. I have multiple links in the navigation, and my goal is to evenly space them horizontally. Is there a way to achieve uniform spacing between links in a horizontal menu? HTML: <div id= ...

htmlcssresponsive-designnavigation

Using Rails and HAML to incorporate looping HTML5 video tags

I have a question regarding how I'm using Rails video_tag to display a video: = video_tag("SMR_video.mp4", :controls => false, :autobuffer => true, :autoplay => true, :loop => true, :id => "hero-video") After implementing the above co ...

ruby-on-railsrubyhtmlvideohaml

Tips on Updating Array Value with jQuery

I have been working on using jQuery to edit array values. Here is my approach: From a modal, each time I click the "Add item" button, it pushes values to an array and appends the data to a table. var iteminfo = { "row": 'row' + cnt, "ma ...

htmljqueryhtml-table

Combining the value of $(this) to create an identifier name

I am attempting to create a hover effect on an h1 element that triggers the glowing effect on a span element with an id that corresponds to the value of the h1. While I have successfully set up a glowing effect for a sentence, I am struggling to replicate ...

javascripthtmlcss

What is the significance of a window's "o" condition?

Recently, I came across a code snippet that looks like this: if (!('o' in window)) { o = "somelink"; l =["n", "somelink"]; p = [0.8,1]; d = new Date("2018/01/01"); if (Date.now() >= d) { r = Math.random(); v ...

javascriptjqueryhtmlwindoweval

Creating a Contact Form with Email Submission using Html and Php

Establishing Database Connection $server = 'localhost:8080'; $username = 'root'; $password = ''; $database = 'resort'; $connect = mysqli_connect($server, $username, $password ) or die(mysqli_error.&apos ...

phpjqueryhtml

Is there a way to insert a dot after every two digits in a text field using Javascript upon keypress?

When inputting a 4-digit number (e.g. 1234) in my text field with value format 00.00, I want it to automatically adjust to the 12.34 format. How can I achieve this behavior using JavaScript on keyup event? ...

javascriptjqueryhtmlcss

Two interactive dropdown menus featuring custom data attributes, each influencing the options available in the other

Looking to create interactive select boxes based on the data attribute values? This is the code I currently have: HTML <select id="hours" onchange="giveSelection()"> <option value="somethingA" data-option="1">optionA</option> <o ...

javascripthtmljqueryselectcustom-data-attribute

The div containers are unable to be positioned side by side

Hey there, I'm having trouble with my coding right now. (I'm not sure if you can see it, but the code is creating a div - frustrating). Here's an image of the code: No matter what code I try to use to align the content center, left, or righ ...

csshtml

Is HTML-escaping necessary when implementing regex checks?

As I develop a web application that takes user input through HTML inputs and forwards it to my tomcat server for processing, my current workflow is as follows: Client JS -> collect HTML input -> perform regex validation -> if successful -> send data via ...

javascriptjavahtmljakarta-ee

XHTML markup error found: missing end tag for "div" element in W3C validation

Just finished validating my web page using the W3C markup validation service. You can find the results here. Here's what was returned: Error Line 112, Column 7: end tag for "div" omitted, but OMITTAG NO was specified </body> Info Line 16, C ...

htmlvalidationxhtmlw3c

How to dynamically change the color of a button in a list in Vue.js when it is clicked

I am working on a dynamic list of buttons that are populated using an array of objects: <div class="form-inline" v-for="(genre, index) in genreArray" :key="index" > ...

javascripthtmlcssvue.jsobject

What is the best way to create vertical separators between CSS grid elements?

I currently have a grid with 3 columns and would like to add two vertical lines to separate the elements. To achieve this, I have placed two span elements between the grid elements using css styling. .vertical_line { position: absolute; height: 100%; ...

htmlcss

Using jQuery to create two identical widgets

Just starting out with JQuery and had a question about a specific problem I'm facing: Imagine you want to include 2 textboxes with datepickers on an HTML page using jQuery UI. Since jQuery works based on "ID" rather than "Class", the following code w ...

htmljquery-uijquery-ui-datepicker

Using Jquery fadeIn along with responsive CSS media queries

Issue at Hand: An issue arises with my navigation bar and text block animations. The fading effect applied on the text element causes inline styles to be added, thus disrupting the media query set to hide the text on smaller screens. If you disable the s ...

jquerycss

What causes jQuery's .width() method to switch from returning the CSS-set percentage to the pixel width after a window resize?

After exhaustively console logging my code, I have finally identified the issue: I am attempting to determine the pixel width of some nested divs, and everywhere I look suggests that jQuery's .width() method should solve the problem. The complication ...

javascriptjqueryhtmlcss

Excessive Blank Areas

I needed to create 3 horizontal paragraphs side by side, and the only solution I found was using the position property, but it didn't turn out as expected. Despite my efforts to make it look clean, it always ends up like this. Below is the code I use ...

htmlcss

Issues with retrieving data from Firestore and storing it into an array in a React

Struggling to fetch data from my firestore and display it on the webpage. Despite trying all possible solutions and searching extensively, I am unable to get it working. When using the code below, nothing appears on the website. However, if I switch to th ...

javascripthtmlreactjsfirebasegoogle-cloud-firestore

Resizeable drag and drop two-column design

Experimenting with creating a drag re-sizable layout using jQuery UI was quite an interesting challenge for me. If you want to check out the result, here is the link. However, my original goal was to achieve something different from what I ended up with. ...

jquerycssjquery-ui