Tips for aligning a div (or any other content) in the center of a

I recently added a small div to my webpage to display 3 options in a stylish way, but I'm encountering an issue - the box is appearing on the left side instead of the center. I have tried using various CSS properties like align-items, align-content, and even text-align, but none of them seem to work. I am unsure if there is another option I'm missing.


      /* CSS Styles */
      body {
        background: #212121;
        margin: 0;
      }

      .card {
        align-items: center;
        width: 210px;
        height: 254px;
        border-radius: 4px;
        background: #212121;
        display: flex;
        gap: 5px;
        padding: .4em;
      }

      /* More CSS styles... */
    

      <!-- HTML Markup -->
      <!-- HTML content -->

Could someone please advise me on how to properly center the div?

htmlcss

Answer №1

To enhance your card's appearance, include the following line in your card class: margin: 0 auto;

body{
    background: #212121;
    margin: 0;
}

header{
    text-align: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    color: #ff568e;
    border-bottom: 4px dashed #ff568e;
}

.card {
    margin: 0 auto;
    align-items: center;
    width: 210px;
    height: 254px;
    border-radius: 4px;
    background: #212121;
    display: flex;
    gap: 5px;
    padding: .4em;
  }
  
  .card p {
    height: 100%;
    flex: 1;
    overflow: hidden;
    cursor: pointer;
    border-radius: 2px;
    transition: all .5s;
    background: #212121;
    border: 1px solid #ff5a91;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .card p:hover {
    flex: 4;
  }
  
  .card p span {
    min-width: 14em;
    padding: .5em;
    text-align: center;
    transform: rotate(-90deg);
    transition: all .5s;
    text-transform: uppercase;
    color: #ff568e;
    letter-spacing: .1em;
  }
  
  .card p:hover span {
    transform: rotate(0);
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="estilos.css">
    <title>Juego</title>
</head>
<body>
    <header>
        <h1>QUIERO JUGAR UN JUEGO....</h1> <img src="icons/jigsaw.png" alt="foto Saw" height="256px">
        <h2>A continuación, podrás elegir los diferentes niveles...</h2>
        <h2>Cada uno más dificil que el otro. GANAR O MORIR. HAZ TU ELECCIÓN</h2>
    </header>

        <div class="card">
            <p><span>HOVER ME</span></p>
            <p><span>HOVER ME</span></p>
            <p><span>HOVER ME</span></p>
        </div>

</body>
</html>

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

A guide on showcasing items on an html webpage through the use of javascript

Currently, I have a series of hardcoded HTML elements in my code snippet. <!-- Reciever Message--> <div class="media w-50 ml-auto mb-3"> <div class="media-body"> ...

javascripthtmlcssbootstrap-4

"Enhance User Interactions with Angular-ui Tooltips Featuring

I recently integrated bootstrap tooltips into my application. While the "normal" tooltips are working fine, I encountered an issue with tooltip-html-unsafe. It seems to display an empty tooltip. Here is my tooltip code: <a><span tooltip-placeme ...

htmltwitter-bootstrapangularjstooltipangular-ui-bootstrap

Closing the space between vertical edges of table data cells

I'm currently in the process of translating my resume from MS Word to HTML and CSS for easier maintenance and sharing purposes. I really like the layout and style of my resume and want to maintain it. The design features a left column with bold titles ...

htmlcsshtml-table

Is it possible to use JavaScript to toggle the visibility of the date picker when using the HTML5 input type=date?

Looking to personalize the HTML5 input type="date" element by integrating a separate button that triggers the visibility of the date picker dropdown. Struggling to find any information on this customization. Any assistance would be greatly valued! ...

javascriptjqueryhtml

Creating a Dynamic Landing Page with Node.js and Express

Recently, I purchased an HTML landing page and am a complete novice in this area... Upon inspection, I noticed there are three distinct folders: /windows /ios /android I'm interested in utilizing nodejs and express to showcase the landing page. Spec ...

htmlnode.jsexpresstwitter-bootstrap-3

The margin on the right side is not functioning as expected and exceeds the boundary, even though the container is using the flex display property

I'm struggling to position the rating stars on the right side without them going outside of the block. I attempted using 'display: flex' on the parent element, but it didn't solve the issue(( Currently trying to adjust the layout of t ...

javascripthtmlcssflexboxmargin

A guide to mastering Controllers in AngularJS

Trying to set up a basic page with a controller but encountering difficulties. The HTML code is straightforward, with an Angular script included, but the functionality isn't working as expected. The HTML snippet: <!DOCTYPE html> <html ng-ap ...

javascripthtmlangularjs

Having issues with handling button click events in jQuery

I'm currently working with jQuery to show a div when a button is clicked, but for some reason, it's not functioning as expected... HTML: <input type="button" id="addmoresg" value="Add More" name="button"> <div id="addsg" style="display ...

jquerybuttonhtmlclick

Logging DOM elements with Electron's webview preload feature

Within my Electron program, I am utilizing a webview in my index.html file. The webview is equipped with a preloader, and my goal is to manipulate the DOM of the webview specifically, not just the index.html file. In my preloader code snippet below, the c ...

javascripthtmlwebviewelectron

I am having trouble with using document.getElementById().value to retrieve text input. Can anyone help me understand why it's not

It's puzzling to me why document.getelementbyid().value isn't working as expected. Upon inspecting the console, no input seems to be sent or printed out in the console. function callApi() { var keyword = document.getElementById('user_ ...

javascripthtmljquery

Video with dynamic sizing doesn't adapt properly

I successfully achieved my main goal, which was to have a background video at the top of my page. However, I am facing an issue with making the video responsive. Currently, as I decrease the screen size, the video shrinks in both width and height rather th ...

htmlcsstwitter-bootstrapvideoresponsive-design

Tips for maintaining a website within a 960px width while stretching the background on the x-axis

I have enclosed the entire website within a div with the ID container. The CSS styling for the container is as follows: #container { width: 960px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; } How ...

htmlcss

What is the process for transforming conditional classes from clxs to cva format?

Looking for a way to convert the code snippet below into cva format... {items.map((item, index) => { const isActive = item.key === SOMETHING; return ( <div key={index} className={clsx( ...

cssreactjsnext.jstailwind-css

CSS :hover problem, text appearing unexpectedly

I'm currently working on designing a logo that displays hidden text when hovered over, providing instructions to users. However, I've encountered an issue where the hidden text reveals itself even before the logo is hovered over. This is frustrat ...

htmlcsshover

Is there a way to remove the unwanted code ​ from the client side of my website?

Upon inspecting the source code of a webpage, I noticed an odd character ​ appearing before the <script> tag on the client side. Strangely, this mysterious character is not present anywhere in the server-side PHP file. I attempted removing a ...

phphtmltwitter-bootstrapsyntax

AJAX loading footer content before images are fully loaded

I am a beginner when it comes to ajax and I'm facing an issue where the footer loads before the images, causing the images to overlap the footer. The problem is illustrated in the image below. <!doctype html> <html lang="en"> <head ...

javascripthtmljquerycssajax

Surprising pause in the menu transition animation

Currently, I am in the process of developing a menu that seems to have some flaws. One issue is that it appears a bit choppy, but the more concerning problem is the half-second delay after clicking an item before it animates. The concept behind this menu ...

javascriptjqueryhtmlcss

What could be causing this `even` function to malfunction when utilizing getElementById?

Need assistance with utilizing document.getElementById? Let's take a look at this code snippet: function even() for (i = 0; i < 10; i++) { if (i % 2 == 0) { alert(i); } } document.getElementById("even").innerHTML = i + &apos ...

javascripthtml

Improving the functionality of the JavaScript key press function

I have a small javascript snippet on my website that allows me to navigate the site using the arrow keys on my keyboard. document.onkeydown = function(evt) { evt = evt || window.event; switch (evt.keyCode) { case 37: ...

javascriptphpjqueryhtmlhttp-redirect

In Safari, my layout is disrupted by the mere mention of the word 'City'

There's something strange happening in Safari that I can't quite figure out. Here's how my layout looks in Chrome: https://i.sstatic.net/lPhnP.png But when viewed in Safari, it looks like this: https://i.sstatic.net/IMnQb.png For some r ...

htmlcssbootstrap-4web-frontend