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

Quiz application utilizing MySQL and JSP technology

I've been developing a Web Application using JSP to host MCQ quizzes. The questions are stored in a MySql Database table called 'qna', with each question having 10 choices. My goal is to design the quiz so that each question appears on a new ...

htmlmysqljsp

Direct jQuery to redirect to a new page and reveal a hidden div

I am facing a situation where I have two web pages named index and results. The results.html page contains some hidden divs with the CSS property set to display: none. My goal is to navigate from the index page using a navigation menu and open the results ...

jquerycss

Tips on adjusting the size of a font icon using an inline element prior to the font being fully loaded

I'm facing an issue with embedding an icon font within text so that it wraps properly. Currently, the only way I can achieve this is by using &nbsp; between the text and the icon (i tag with font awesome). However, this causes a problem as the ico ...

htmlcssfont-awesomeicon-fonts

When attempting to pass Rgraph image data through a jQuery AJAX call, a 403 Forbidden error is being

I have been working on a project that involves creating graphs/charts using the Rgraph PHP library. To generate these charts, my script follows these steps: Calculate the graph points and render the graph using the Rgraph Draw() method. Create an image d ...

javascriptphpjqueryajaxcakephp

Checking parameters from two forms that are both associated with the same model in Rails

Recently, a new feature was added to the system - a phone and sim checker. Users are required to input their phone number into the first form. If the phone number is found in the database, a message indicating this is displayed. Otherwise, the form switche ...

javascriptjqueryruby-on-railsrubyajax

Numerous changes using media queries

Is there a way to have separate transitions in media queries without duplicating code? @media screen and (min-width: 800px) { #div { transition: width 1s; } } #div { transition: height 1s; /* Overrides previous one :( */ } How can I a ...

htmlcssmedia-queriestransition

Saving maps on React Native can be done easily using AsyncStorage

I am facing an issue with saving user inputs as a JS map using AsyncStorage in my React Native app. Despite no errors during the saving process, I encountered "[object Map]" when attempting to retrieve the data. Here is a simplified version of my user map ...

javascriptreactjsdictionaryreact-native

What is the best way to align several columns at the center in Bootstrap?

I'm struggling to center-align Card 1 so that it perfectly aligns in the middle of the page alongside the other cards (Card 2, Card 3, Card 4, Card 5). Despite numerous attempts, I can't seem to find a solution for this issue. Does anyone know ...

htmlcss

Utilizing AJAX response to update the current URL in a Spring MVC application - A step-by-step guide

In my ongoing project using Spring MVC, the homepage features two input fields of String type. However, the regNo field accepts numbers as input. If a user enters a regNo, it should be directed to a specific method in the controller. On the other hand, if ...

javajavascriptjqueryajaxspring-mvc

Issue with GridLayout causing rows to be misaligned

As a newcomer to the world of CSS, I found myself in need of a grid layout for a quick project. Here's the mishmash of CSS code I came up with: body { margin: 40px; } .container { display: grid; grid-template-rows: [row1start] 20% [row2sta ...

cssflaskcss-grid

Designing architecture for NPM packages in TypeScript

I am currently developing multiple NPM packages using TypeScript and I am exploring the most effective strategies for supporting various target architectures. When compiling to ES3, there is extensive support but it comes with additional boilerplate for c ...

javascripttypescriptnpmpackagecompatibility

How can I customize the appearance of a checkbox button in JavaFX?

I am currently working on styling a JavaFX scene with CSS in a stylesheet. The goal is to apply styles to all the "basic" elements of the scene when it loads. My issue lies in finding the correct code combination to change the background color of a button ...

csscheckboxjavafxstyling

What specific CSS selector should be targeted in order to modify the appearance of this button?

I'm attempting to alter the appearance of a button within my Wordpress site, but I've hit a roadblock in identifying the correct element to modify. So far, I've tried targeting: .input#chained-quiz-action-1, however, the button stubbornly re ...

jqueryhtmlcsswordpress

Every time I attempt to log in, the code keeps generating an error message net::ERR_EMPTY_RESPONSE. If successful, it should redirect to the

The code is producing a net::ERR_EMPTY_RESPONSE error when attempting to log in. The username and password are hardcoded. I simply want the admin to input their credentials on the Employee.html page, and if they match the ones in the main.js file, redirec ...

javascripthtmlnode.jsexpressbody-parser

Obtaining the source id using HTML5 Drag & Drop functionality

Is there a way to retrieve the id of the div I am dragging from, similar to how it is demonstrated here? Your insights are greatly appreciated. Thank you. ...

html

What is the best way to create an HTML table using a two-dimensional list in Python?

I am currently facing an issue with the functionality of my code. The HTML is being generated as desired, but it appears at the top of the page rather than in the intended location. def fixText(self,text): row = [] z = text.find(',') ...

pythonhtmllisthtml-table

Building personalized error messages using graphql-js and express

It has come to my attention that you have the ability to create customized errors within graphql and graphql-express. https://codeburst.io/custom-errors-and-error-reporting-in-graphql-bbd398272aeb I recently implemented a custom Error feature, but it see ...

javascriptnode.jsgraphql

Assign increasing values within an array

Is there a way to efficiently update multiple values in an array by mapping through them? I want to select and change all of them simultaneously. state.formData.forEach(item => { item.EndDate = nextDayIfSelected; }); ...

javascriptvue.js

What is the best way to display a <div> depending on the screen size in React JS using a global variable, without utilizing state management?

I am attempting to display a message based on the screen resolution in ReactJS. I am utilizing a function component and trying to accomplish this without using state, by using a global variable. const isDesktop = window.innerWidth; {isDesktop > 768 ? ...

javascriptreactjs

What steps can be taken to enable users to draw a path on a Google Map?

I'm working on a new project for a Facebook app that will allow users to map out their marathon route using Google Maps. I plan to utilize mySQL database records to store fixed points along the path (such as specific locations based on latitude and lo ...

phpjavascriptmysqlfacebookgoogle-maps