How to center a div within another div with percentage-based height and width dimensions

I am struggling to vertically align a div within another div in order to create a play button for a video. I have attempted various traditional methods of vertical alignment and even tried using a jQuery script, but so far have been unsuccessful.

EDIT - The content / The circular play button must remain fully responsive, so I cannot remove the 20% width and the 20% padding-bottom it currently has.

You can view a live version of the website here, where the 'videoplay' div is the one in question.

HTML

<div class="rectanglewrap">
    <div class="rectangleimg" id="gknengine">
        <div class="videoplay vcenter"><span class="glyphicon glyphicon-play" id="playbutton"></span></div>
    </div>              
</div>

CSS 

.rectangleimg{
  position:relative;
  height:0;
  width:100%;
  padding-bottom:50%;
}
.div-centerer {
  position: absolute;
  top: 0;
  width:100%;
  height:100%;
}

.vcenter {
  display: inline-block;
  vertical-align: middle;
}

.videoplay {
  border-radius: 100%;
  background-color: #12A537;
  height:0;
  width:20%;
  padding-bottom:20%;
  margin:0 auto;
}

I would greatly appreciate any assistance with this issue!

Thank you.

jqueryhtmlcss

Answer №1

One way to make your design mobile-friendly is by using relative and absolute positioning. By utilizing percentages, you can easily adapt the layout for different screen sizes:

.rectanglewrap {
    width: 100%;
    text-align: center;
    border: 1px solid #ddd;
    height: 200px;
    position: relative;
}
.videoplay {
    position: absolute;
    top:50%;
    margin-top: -10px;
    left: 50%;
    margin-left: -10%;
    width: 20%;
    background: #ddd;
}

To ensure proper alignment, set the top and left margins of the play element to half its width and height respectively, using percentage values.

You can view an example implementation in this Fiddle: http://jsfiddle.net/7fs52w2L/2/

Answer №2

For those who are using jQuery, here is a quick guide on how to achieve this:

$('#playbutton').css('top', ($('#gknengine .videoplay').outerHeight() / 2) - ($('#playbutton').height() / 2));

To ensure proper functionality, consider placing this code within a $(window).resize() handler.

Answer №3

If you're not concerned about supporting older browsers such as IE < 9, you have the option to utilize the transform property in CSS to center your div.

div.videoplay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  // margin-top: 1px <--- delete
}

#playbutton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  // top: 1px <--- delete
}

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

Learn how to use AJAX functions in CodeIgniter to modify webpage data efficiently

I currently utilize CodeIgniter as my chosen web framework. In the controller, I initiate $this->load->view('Apartments_Hotels', $data) to load the initial data. However, I am now faced with the task of dynamically reloading the page with u ...

phpjqueryjsonajaxcodeigniter

When I switch to a different navigation system, the css class gets removed

Let me clarify what I am looking for: Upon entering the index.php page, LINK_1 button is active. When I switch to LINK_2, it becomes active. I have only one index.php page where I include parts of external pages using PHP. Page_1 https://i.sstatic.net/Yv ...

javascriptphphtmlcss

The picture does not occupy the entire page

Here is a simplified version of my HTML and CSS: @keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 100% 0; } } *{margin:0;padding:0;}/*added as requested*/ .background-image { background-im ...

htmlcss

The response cannot be processed by the jQuery ajax() function

I've been attempting to handle the response body of an ajax call made with jQuery, but I haven't had any luck so far. Here is the jQuery code I'm using: function doAjaxClosedStatus(url, requestId, closedStatusId) { $.ajax({ type: "POST ...

ajaxjqueryhttpresponse

Target specifically the onhover div element using JQuery and trigger the smooth sliding down effect with the SlideDown() function

Is it possible to create a unique JQuery slidedown() function that will only be applied to the div where the mouse is hovering? I have managed to make it work by giving each div a separate class, but when I name them all the same, it triggers the slide do ...

javascriptjquerycss

Exploring the process of implementing a dynamic background image feature in Vue

Looking to create a dynamic navbar and change its background image. I attempted the following: Here is my attempt: <b-navbar toggleable="lg" v-bind:style="headerStyle"> this.headerStyle = { backgroundImage: &a ...

javascriptcssvue.jsfrontend

Elements stacking up in succession

I am having issues with the alignment of my div elements, as they are either stacking behind or on top of each other. td { width: 14.28%; height: 16.6%; position: relative; } .details { position: absolute; display: none; ba ...

htmlcss

Does Cluetip have the capability for a delayed hover feature?

I am interested in utilizing the hover feature of the cluetip jquery plugin. I have a scenario where I want to trigger an ajax request on hover, but only if the link is highlighted for a certain period before the loading image appears. This way, accidental ...

jquerypluginscluetip

How can I implement a daily-updating timestamp on a website using bootstrap and javascript, particularly for review and blog posts?

I am looking to add a timer and date stamp feature to my website built with Bootstrap, using JavaScript or any other necessary tools. Typically, on platforms like Google or in blog posts, there is a small text under the user's photo and name indicatin ...

javascripthtmlcssbootstrap-4

Arranging Bootstrap 4 Right Column at the Top in Mobile View

My webpage is built using Bootstrap 4 and the layout looks like this: <div class="row"> <div class="col-md-8"> Content A </div> <div class="col-md-4"> Content B </div> </div> It displays ...

csstwitter-bootstrapgridbootstrap-4

Updating the load context variable in Django template after making changes via an AJAX call: a step-by-step guide

Here is the code snippet for displaying table items in my customer_items.html page: <table id="tblData" style="width: 100% !important;" class="display table table-bordered table-striped table-condensed"> <thead> <tr> ...

javascriptjquerypythonajaxdjango

Special effects for the images动画效果。

Is there a way to add animation effects to images in the about section using this code: <div id="about" class="row section bgimg3"> <div class="col-sm-8"> <h2 style="color:black;">Want to Know More About me?</h2> ...

javascriptjqueryhtml

jQuery Error: Unexpected Internal Server Issue

I have a simple login page created in asp.net, but I'm facing an issue with jQuery not working. I keep getting this error repeatedly and need assistance in solving it. Here is the HTML markup: <html> <body> <form id="form1" r ...

javascriptjqueryasp.net

Notifying the Player of Victory in a Javascript Tic Tac Toe Game: The Winning Alert

Recently, I decided to dive into Javascript and kick off my very first game project - a Tic Tac Toe game. If you're curious to see the code for my project, you can check it out here: Tic Tac Toe Project One feature I'm eager to implement is a n ...

javascripthtmlcsstic-tac-toe

SQL table not being updated by AJAX request data submission

I'm encountering an issue when trying to update a SQL table with form data sent via a JQuery AJAX POST. Even after using mysql_error(), no errors are being returned. As a troubleshooting step, I appended "-Test Test" to my textarea input. This addi ...

phpjqueryhtmlsqlajax

Clicking on links within jQuery tabs does not trigger the opening of additional tabs

I am currently using the code below. The tab section is working well and switching between tabs as intended. However, there seems to be an issue with a link within a div class called "showMem" at the bottom of each tab. This link is supposed to open up t ...

jqueryasp.nettabshyperlink

CSS - Techniques for stacking floated right divs on smaller screens

On a large screen, my widget looks perfect, but when I switch to mobile view, it becomes problematic. The widget consists of a title section with two additional fields that need to be floated to the right and occupy only as much width as the text inside t ...

htmlcssmobileresponsive-design

jQuery.datePicker - determining the number of days

Hello there! I have implemented the jquery.datePicker example created by Kelvin Luck. () Is there a way to calculate the difference in days between Date1 and Date2 ? Thank you all! ...

jquerydatepicker

Ensuring that the last function receives all necessary data by utilizing deferred functions

How can I ensure that the function displayResults() retrieves data before displaying it? Both getResultA() and getResultB() functions utilize $.Deferred. Additionally, getResultB() relies on the results from getResultA(). function getResultA() { var def ...

jqueryjquery-deferred

What is the best way to toggle unobtrusive validation using jQuery when showing or hiding elements?

Update: Is it feasible to eliminate validation rules derived from Attributes on fields in the view model exclusively on the client side? -- I am altering the display of certain fields based on a selection from a dropdown list. I also need to adjust the v ...

jqueryasp.net-mvc-3attributesunobtrusive-validation