Achieving vertical and horizontal centering for a div while also placing a checkbox in the top corner of the parent div

Currently, I am in the process of creating an app using VueJS and Bootstrap. My goal is to have a div with an image centered both vertically and horizontally, while also ensuring that the checkbox label is positioned at the top right corner. Here's what it looks like:

https://i.sstatic.net/p3mKf.png

However, when hovering over the card, the image seems to move slightly towards the left as shown here:

https://i.sstatic.net/ob4nC.png

  .file-name-style{
    height: 26px; 
    color: #424242; 
    font-family: 'Source Sans Pro'; 
    font-size: 15px; 
    font-weight: normal; 
    font-style: normal; 
    text-decoration: none; 
    text-align: left;
    padding: 5px 15px;
  }

  .file-size-style{
    height: 26px; 
    color: #9E9E9E; 
    font-family: 'Source Sans Pro'; 
    font-size: 12px; 
    text-align: left; 
    line-height: 1px;
    padding: 10px 15px;
  }
  
  .header-rectangle {
    height: 155px; 
    background: #F5F5F5; 
    border: 1px solid #E0E0E0; 
    border-radius: 0px;
    border-bottom: none;
  }

  .footer-rectangle {  
    height: 65px; 
    background: #FAFAFA;
    border: 1px solid #E0E0E0; 
    border-radius: 0px;
    vertical-align:middle; text-align:center;
  }
... ... (remaining code content) ...

Any suggestions on how I can achieve the desired layout where the image-centered and the checkbox positioned at the top right would be greatly appreciated. Thank you in advance.

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

To center the image both horizontally and vertically within a div, you can utilize bootstrap classes such as d-flex, align-items-center, and justify-content-center. For positioning the checkbox at the top right corner, add the position-relative class to the header-rectangle. You can style the label with 

position: absolute; top: 0; right: 10px
, adjusting the values of top and right properties as needed for your layout.

<div v-for="(item, index) in recentFiles" @mouseover="showByIndexRecent = index" @mouseout="showByIndexRecent = null" class="col-xs-5ths col-sm-5ths col-md-5ths col-lg-5ths">
  <stats-card>
      <div slot="header" class="header-rectangle position-relative">
          <div>
              <label class="form-checkbox" v-show="showByIndexRecent === index || recentlySelectedFiles.includes(item.name)" style="position: absolute; top: 0; right: 10px">
                  <input type="checkbox" :value="item.name" v-model="recentlySelectedFiles[index]" style="height:16px; width:16px;">
                  <i class="form-icon"></i>
              </label>
          </div>
          <div class="d-flex align-items-center justify-content-center">
              <img :src="item.source" style=" height: 50px;">
          </div>
      </div>
      <div slot="footer" class="footer-rectangle" style="display: flex; flex-direction: column; justify-content: center;">
          <div class="row">
              <div class="col-9" style="display: flex;flex-direction: column;justify-content: center;">
                  <div class="file-name-style">
                      <span>{{item.name}}</span>
                  </div>
                  <div class="file-size-style">
                      <span>{{item.size}} MB</span>
                  </div>
              </div>
              <div class="col-3" style="display: flex; flex-direction: column; justify-content: center; margin-top:">
                  <div v-show="!item.shared" style="float: right; padding: 0px 5px 5px 0px; margin-right: 10px;">
                      <i class='fas fa-users' id="image"></i>
                  </div>
              </div>
          </div>
      </div>
  </stats-card>
</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

Adjusting the Size of Dialog Windows in Lightswitch HTML Client

When using the MS Lightswitch HTML Client, if a dialog menu option contains too many characters to fit within the length of the dialog window, the text will be cut off and replaced with (...). Is there a way to add a scroll bar or adjust the text size in ...

jqueryhtmlcssvisual-studio-lightswitchlightswitch-2013

The state variable remains undefined even after integrating useEffect in a React.js component

Hello, I have a component within my React application that looks like this: import React, { useEffect, useState } from "react"; import AsyncSelect from "react-select/async"; import { ColourOption, colourOptions } from "./docs/data"; const App = () => ...

javascriptreactjs

utilizing Nuxt code in Elixir/Phoenix

Overview In my previous work, I combined frontend development with nuxt and backend support from elixir/phoenix, along with nginx for reverse proxy. Looking to enhance the performance of the system, my goal is now to migrate everything to Elixir/Phoenix. ...

javascriptelixirphoenix-frameworknuxt.js

Exploring the Combination of Conditional Rendering and Redux within the App.js File

Currently, I am in the process of setting up an authentication flow with Redux in my application. To control the display of either the app screen or the authentication screen, I have implemented conditional rendering in my App.js file. Here is the snippet ...

javascriptreactjsreact-nativeredux

What steps should be taken to enlarge a checkbox within a table?

I need help with resizing the checkboxes that are inside a table. When I try using width:###px; height:###px;, it only seems to make them smaller, not bigger. Even when I set the values higher than the default size, the checkboxes stay the same while the d ...

htmlcsscheckboxhtml-tableresize

Do you think React hooks will totally take over the role of creating class-based components?

Are React hooks poised to entirely replace class-based component creation? Will companies quickly integrate React hooks in the future? Is it worth learning React hooks? ...

javascriptreactjs

Potentially undefined object that may be nested and destructured

Here is a snippet of my auto-generated query types: export type MatchLivePlayerType = { __typename?: 'MatchLivePlayerType'; playbackData?: Maybe<MatchPlayerLivePlaybackDataType>; }; export type MatchPlayerLivePlaybackDataType = { __t ...

javascriptreactjstypescript

"Improprove your website's user experience by implementing Material UI Autocomplete with the

Recently, I experimented with the Autocomplete feature in Material UI. The focus was on adding an option when entering a new value. You can check out the demo by clicking on this link: https://codesandbox.io/s/material-demo-forked-lgeju?file=/demo.js One t ...

javascriptreactjsautocompletematerial-ui

Creating an effortless RSS feed using jQuery and Ajax

I could use some assistance with creating a basic rss feed that pulls content from websites like arstechnica. I've spent the last few hours researching how to do this, but I'm feeling a bit lost on the correct approach. Currently, I'm trying ...

javascriptjqueryajaxxmlrss

Save the discovered word in an array as a variable

let variable = process.env.a for(let item of variable){ if(message.content.toLowerCase().includes(item)){ var vsFound = //The Word Found In A Discord Message message.reply("Said " + "'" + vsFound + "'&q ...

javascriptnode.jsarraysenvironment-variablesdiscord.js

Exploring effective testing approaches for C++ plugins in Node.js

When working on Node JS, I have experience creating native C++ modules. However, my testing approach typically involves writing tests for these modules in Javascript. I am curious if this is an effective test strategy or if there are more optimal ways to ...

javascriptc++node.jsdebuggingtdd

Using VueJs to invoke a plugin from a .js file

I'm seeking a deeper understanding of working with vueJS. My current setup In my Login.vue component, there is a function logUser() from UserActions.js which in turn calls the postRequest() function from AxiosFacade.js Additionally, I use a plugin ...

javascriptvue.jspluginstoast

Unable to transfer a function to a component using <Route /> tag

In the Erm component, the function setErm is undefined even though it is received by the App component. When passing something like something='foo', the ERM component receives it but not setErm={props.setErm} const App = props => { console. ...

javascriptreactjsreact-router-v4

Utilizing hyperlinks within NicEdit content and managing events with jQuery

I am using nicEdit, a rich editor, on my website to insert hyperlinks into the content. While I can successfully add hyperlinks using the setContent() method after initializing nicEdit, I am facing issues with handling click events for hyperlinks that have ...

javascripthtmljquery-uihyperlinknicedit

What steps do I need to take to ensure NextJS stores my edits in VSCode?

I have attempted various troubleshooting steps such as changing file extensions from .js to .jsx, turning on Prettier for formatting upon saving, setting it as the default formatter, reloading and restarting the editor. However, the issue with not being ...

javascriptvisual-studio-codenext.jsprettier

Maintain the vertical alignment of an item at a fixed point, even as the height of the

I'm currently working on a multi-step form project with three tabs, each containing a different section of the form and varying heights. The challenge I'm facing is to center the tallest tab vertically on the page, while aligning the other two ta ...

htmlcssformscss-gridresponsive

Is it possible to consolidate several font names under a single alias in CSS?

Is it possible to use a single alias for multiple font names in CSS? For example, if I have font-family: 'Font A', 'Font B', 'Font C', ..., sans-serif; Can I simplify this to just one name to refer to all those fonts, like t ...

htmlcssfonts

Exploring the world of web development with a mix of

var articles = [ {% for article in article_list %} {% if not forloop.first %},{% endif %} { title: "{{ article.title }}", slug: "{{ article.slug }}", content: "{{ article.content }}", auth ...

javascripthtmldjango

Utilize vue.js to save the components of an object

data() { return: { user: {}, userName: "", userAge: "" } }, methods: { saveUserName: function() { this.userName = this.newUserName; this.$refs.userNameModal.hideModal(); this.$ ...

javascriptvue.jssession-storage

Maximizing performance through strategic database structuring with PouchDB/CouchDB

Recently, I've been researching efficient ways to store and retrieve data for my time management/project capturing application. I would greatly appreciate any insights on which storage strategy to utilize, or suggestions for alternative approaches, es ...

javascriptdatabasedatabase-designlocal-storagepouchdb