What is the best way to vertically center a button against a video using CSS?

How can I vertically center a button against a video using CSS?

Here is my code: https://jsbin.com/curefoyefe/edit?html,css,js,output

<video controls="" ng-show="myForm_live_video.live_video.$valid" ngf-src="live_video" width="200" height="200" class="" src="https://www.w3schools.com/html/mov_bbb.mp4 . "></video>
<button class="btn btn-danger mleft-15" ng-click="live_video = null" ng-show="live_video" style="" class="abc">Delete</button>

https://i.stack.imgur.com/7cCFT.png

I would like to add a button that stretches around the circle in the image.

javascripthtmlcss

Answer №1

To vertically align elements, you can leverage the power of flexbox. Simply wrap the button and video in a container and apply the following styling:

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

When using a flex container with a row direction, setting align-items: center will center the elements vertically.

Check out the demo on CodePen: https://codepen.io/abc123/pen/xyz456

Answer №2

/*The parent element should have a position defined as relative */

The button style:

position: absolute;

top: 50%;

left: 50%;

margin-top: -15px; /*equals half of the button's height */

margin-left: -50px; /*equals half of the button's width */

}

Answer №3

Click here for the solution. Hopefully, this will be useful.

CSS

.video-container {
    display: flex;
}

.button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML

<div class="video-container">
    <video controls="" ng-show="isValid" src="https://www.example.com/video.mp4"></video>
    <div class="button-wrapper">  
        <button class="btn btn-danger mleft-15" ng-click="deleteVideo()">Delete</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

What could be causing the DIV to be out of place when the window is resized?

When the window is minimized, all elements remain intact except for the navigation. The image below shows the layout when the window is maximized, while the image above depicts the layout when the window is minimized. HTML: <header> <div c ...

htmlcssmargin

When the next button is clicked, the button content disappears

I am struggling with a problem involving two buttons that store tables. The issue is, I want the table to disappear when the second button is clicked and show the contents of the second button immediately after clicking it once, rather than having to click ...

javascripthtmlcssbuttonsvg

Is it possible to delay the loading of a page using location.href?

Trying to determine when a page has finished loading using location.href. Currently, my code is set up like this and I want certain events to occur once the page is fully loaded. I attempted using $.get but encountered issues with my existing implementatio ...

phpjavascriptjquery

Sorting of tables does not function properly following an ajax request

I built a table that utilizes an AJAX response triggered by selecting a date from a drop-down menu. <!--datepicker--> <div class="col-md-4"> <input type="text" name="date_po_month_picker" id="date_po_month_picker" class ...

jqueryajaxhtml

Tips for creating a vintage, weathered font appearance on a web browser

Is it possible to create unique, randomly outwashed letters using a standard font? Instead of relying on pre-designed outwashed fonts available at , I am interested in achieving the same effect with a regular font that appears washed out when displayed in ...

htmlcssfontswebfontshandwriting

Rewriting Next.js with custom headers

My web app allows users to create their own profiles with custom usernames, which can be accessed via the following URLs. ourplatform.com/john ourplatform.com/john/about ourplatform.com/john/contact ourplatform.com/jane ourplatform.com/jane/about ourplatf ...

javascriptnginxnext.jshttp-headers

Is it possible to use JavaScript to make a CSS animation mimic the behavior of a :hover effect?

My CSS animation looks like this: HTML: <div class="container" id="cont"> <div class="box show"></div> </div> CSS: .container { width: 100vw; height: 100vh; } .box { position: absolute ...

javascripthtmlcss

What are the methods for accessing data from a local Json file on an html page without using a server?

Looking to access a local Json file from an HTML page, but encountering challenges in reading the file on Chrome and IE. Is there a method to achieve this without relying on a web server? ...

htmlangularjsjson

Tips for creating a flexible popover widget

I am facing an issue with my project that has a popover (ng-bootstrap) similar to what I need. The problem is that the tooltips and popovers are not flexible when it comes to resizing the page. To address this, I attempted to put a mat-grid (which works pe ...

htmlcssangular

What is the method for retrieving the active element with Waypoint?

Currently, I am implementing Waypoint (version 7.3.2) in my React project using React version 16. My goal is to create a scrollable list of items where each item fades out as it reaches the top of the container div. My main inquiry is how can I obtain a re ...

javascripthtmlcssreactjsjquery-waypoints

What is the module system that fabric composer utilizes for its logic JavaScript files?

I am currently in the process of creating a business-network-definition for Hyperledger using Fabric (based on generator-hyperledger-fabric). Everything has been running smoothly so far, but as we move onto our Proof of Concept (PoC), a few questions have ...

javascriptnode.jshyperledger-fabrichyperledgerhyperledger-composer

JavaScript Transcriber

Hey there! I'm currently attempting to compile some JavaScript code that I have written in a textarea and get the output of this code. I've tried using the eval() method, but unfortunately, I haven't been able to get the complete response. C ...

javascriptnpmdependencies

Adjust a Specific CSV Value Using JavaScript and NodeJS

Hey there, I have a CSV file that I need to extract and modify a specific value from. Let's take this as an example: CSV 90,90,90,90,90 3,1,1000,2,931 I'm looking to access the number "2" in this CSV. How would I go about doing that? And once ...

javascriptnode.jscsv

Is there a way to ensure that my off-screen menu functions properly across all web browsers?

I am in the process of developing a website for my school project and everything has been going smoothly so far. However, I encountered an issue when trying to open the site on different web browsers. The off-screen menu that I created using HTML/CSS seems ...

htmlcss

Is my Magento journey on the correct course?

I am wanting to include or require a file in DATA.php within magento. Below is the code snippet I have: public function formatPrice($price) { require_once(Mage::getBaseDir('app').'\design\frontend\neighborhood ...

javascriptphpjqueryjsonmagento

The necessary parameters are not provided for [Route: sender] with the [URI: {name}/{code}]. The missing parameters are name and code

I have encountered a problem while using AJAX and I am struggling to find a solution. Routes: web.php Route::get('/{name}/{code}', 'TestController@counter'); Route::post('/{name}/{code}', 'TestController@sender')-&g ...

javascriptjqueryajaxlaravel

Flex: 1 does not completely fill the Angular layout div in vertical dimensions

I am currently developing a sidebar using Angular and Flex. The app-sidebar is nested within the Angular component layout shown below: <div fxlayout="row" fxFill> <app-sidebar fxLayout="column" fxFlex="10%"></app-sidebar> <div ...

htmlcssangularflexbox

Querying the height of an image element using jQuery and dynamically adding padding if necessary

I've got a Bootstrap carousel displaying images with different heights, and I'm looking to vertically center these images. My approach involves determining the image height, subtracting it from a fixed height value, and if the result is less than ...

jquerycss

The function react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxDEV(...) is not recognized

For my react-redux project, I utilized json-server as the server for managing orders. The status of each order is saved in the state within UiReducer and is then accessed in the "OrderStatusPage". The current NODE_ENV configuration is set to "development". ...

javascriptnode.jsreactjsreact-redux

Sending the HTML input value to a Knockout view

Can someone assist me with a dilemma I'm facing? Within CRM on Demand, I have a view that needs to extract values from CRM input fields to conduct a search against CRM via web service. If duplicate records are found, the view should display them. Be ...

javascriptjqueryknockout.jstypescript