Place elements in relation to the ancestor of their parent

Is it feasible to position elements in relation to the ancestors of their parents?

<div id='div1'>
   <div id='div2'>
       <input type='button' class='btn'> button 2</button>
       <input type='button' class='btn'> button 3</button>
       <input type='button' class='btn'> button 1</button>
   </div>
</div>

The desired CSS objective is to align the buttons vertically centered to the first div. Here is the CSS I attempted:

.btn{
     position: relative;
     top: 50%;
     transform: translateY(-50%)
  }

However, this code centers the buttons relative to the second div which has different dimensions compared to the parent div. Is there a way to achieve this?

htmlcss

Answer №1

Here is the fiddle link for you to check out: https://jsfiddle.net/3531chbz/1/

The key is to avoid using the position: attribute on the second div, which has an id of #div2. This way, the child elements within the second div will inherit their positioning from the grandparent element.

Additionally, the position of the input should be set to position:absolute.

HTML

<div id='div1'>
   <div id='div2'>
       <button class='btn'> button 2</button>
       <button class='btn'>button 3</button>
       <button class='btn'>button 1</button>
   </div>
</div>

CSS

#div1 {
    position:relative;
    background-color:green;
    height:400px
}
#div2 {
    background-color:blue;
    height:200px;
    text-align:center;
}
.btn {
    position:absolute;
    top: 50%;
    transform: translateY(-50%)
}

Answer №2

To properly align the div2 element enclosing the buttons, simply center it within its parent.

Note: The HTML snippet involving the 

<input type='button' class='btn'> button 2</button>
is considered invalid in terms of HTML syntax.

#div1 {
  height: 250px;
  position: relative;
  background: lightgreen;
}
#div2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: red;
}
<div id='div1'>
  <div id='div2'>
    <button class="btn">button 2</button>
    <button class="btn">button 3</button>
    <button class="btn">button 1</button>
  </div>
</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

Employ the CSS pseudo-element :before within a UL element to generate a vertical line

I'm currently working on a vertical menu with the capability of having submenus. My aim is to include a vertical line using CSS pseudo-element ::before along with border. The challenge I'm encountering is that the CSS is applying to the entire m ...

csspseudo-element

Can React components receive props or data when they are inserted into regular HTML code?

I have a project where I need to make updates to an old-fashioned website. The current layout is table-based and coded by hand. My idea to streamline the process is to use React to minimize repetitive coding tasks. Specifically, I want to loop through an a ...

javascripthtmlreactjs

Styling web pages with HTML and CSS directly from a MySQL

I'm facing a challenge in crafting a solution for a intricate issue. My project involves building a website that generates HTML templates containing both CSS and HTML files. Users will have the ability to create multiple templates/sites. In an effort ...

phpmysqlhtmlcssparsing

Updating multiple rows in MySQL with PHP and arrays

Encountering a challenge while updating multiple rows in Mysql using arrays. Let's consider the submit form below: $n = array(); //Supplier Name $s = array(); //Short Name $o = array(); //Shipment No. $id = array(); //Supplier ID <form action= ...

phphtmlmysqlarraysforeach

Positioning a Form with Sliding Out Effects Using CSS

Hello, I recently came across a tutorial online that helped me create a form slide effect on my website. However, the issue I'm facing is that the form is positioned to the left and I would like it to be placed on the right instead. For reference, h ...

jquerycss

Show two choices in a select box next to each other

I've been attempting to display a select box with two options side by side in a list format. Struggling to find any libraries that can achieve this functionality. Here is an example: <select> <option x><option y> <optio ...

javascriptjqueryhtmlcss

Select only the immediate descendants of a div that are not images

Can we select only the immediate children of a div excluding images? Is there a way to achieve this using the :not-selector or any similar method? For example: http://codepen.io/anon/pen/hlrAg Incorporating a media query, I want to apply left/right-padd ...

csscss-selectors

Use the jQuery library to detect scrolling and toggle the CSS class between 'selected' and

I am trying to dynamically add the "selected" class to a[href] when a specific DIV comes into view while scrolling. However, I want to remove this class completely once the DIV has been scrolled past. const links = $(".cd-faq-categories li a"); // Find al ...

javascriptjqueryhtmlcss

How about determining the map size based on Divine proportions?

Is there a way to make the map at https://codepen.io/sinanelms/pen/MqdNNY responsive to screen size changes? I attempted the following code but was unable to achieve the desired outcome. <style type="text/css"> body{ background:#fff;} #map ...

pythonhtmlflask-sqlalchemy

Alternative Email for Outlook and Gmail

Hey amazing and intelligent buddies! I've been working on implementing a fallback system for email clients, but despite consulting resources like this HTML Emails: fallback for mso conditional? and other insightful blogs, I still seem to be facing so ...

htmlcssemailoutlookgmail

Showing the values of two distinct select boxes in a URL

Here are both select boxes, the goal is to display selected values from both in the URL. This can be achieved by displaying them like this: e.g www.example.com#135+#140 OR www.example.com#135&140 (The order of values doesn't matter as long as bot ...

javascriptjqueryhtmlselectparameters

The functionality of AJAX is triggered only on the second click

On my index.html page, I'm attempting to implement a basic AJAX functionality. When clicking on an anchor tag, the text will be sent to a PHP page called data.php, which will then display the clicked page. The code is functional, but there seems to be ...

phpjqueryhtmlajax

A step-by-step guide on changing the class of a focused contenteditable element with a button click using jQuery

I need assistance changing the class of an element within a contenteditable div. Here is my current code: <button>swap class</button> <div contenteditable="true"> <h1 class="line-height-1">Your Headline Here</h1> </di ...

javascriptjqueryhtmlcontenteditableclassname

Creating HTML email forms without needing to use Outlook

We're currently looking into various options for sending forms via email. (None of us are HTML experts, we're more familiar with VB.net.) Here is the code I came across and was able to understand: <!DOCTYPE html> <html> <body> ...

htmlemailoutlook

Switching image sources using jQuery on click

Take a look at the code snippet I've assembled below: $('img').on({ 'click': function() { var src = ($(this).attr('src') === 'memes/2a.png') ? 'memes/2b.png' : ...

javascriptjqueryhtmlwebtoggle

Implement a validation check within a text box by utilizing JQuery

I am attempting to insert a validation symbol (a green check mark) inside a text box once a user fulfills specific criteria. My approach involves using JQuery for implementation. I have made an attempt using Fontawesome icons with the following code, but i ...

jqueryhtmlcssfont-awesome

The CSS element is styled with a background color while maintaining a level of transparency

My menu structure is set up as follows: <nav id="main"> <ul id="nav-user"> <li class="user-name"> <span class="name">John Doe</span> <ul class="submenu"> <li>Pro ...

htmlcss

The combination of absolute positioning and a canvas

Can someone help me understand why the span is positioned at the bottom of the root span instead of at the top? Here's a link to my Plunker: /* Styles go here */ span { background-color :#808080; } canvas { background-color:#800000; } <!DO ...

csshtmlcanvas

Restrict the child's height to the remaining space within the parent container

I'm attempting to divide the viewport's height between two divs. In the top div, there is a small div followed by a larger div that should scroll if it doesn't fit within the remaining space of the parent div. Below is the structure of my HT ...

htmlcss

Having difficulty upgrading from BootStrap 3 to BootStrap 4

Need assistance updating from BootStrap 3 to BootStrap 4 on my local server. After trying to update, I ended up with a result that still reflects BootStrap 3. https://i.sstatic.net/Bs9H0.jpg Here's the code snippet I used for linking: <link rel=& ...

htmlcsstwitter-bootstrap