How to center div in middle of screen. Or, if using flexbox, how to disable outer div clickability but preserves inner div clickability?

Question

I have centered these 2 black buttons inside the grey div successfully with flexbox like this image `

#outerDiv{
   display: flex;
   justify-content: center;
   width: 100%;
   background: #888; /* Only for demo purposes */
   opacity: 0.86;
  /* Styles for fixing always at bottom */
  position: fixed;
  bottom: 0%;
}

#innerDiv{
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

The problem is that I want the black buttons to be clickable but the outer grey div not. Grey div actually prevents me to click the page below (like the "ADD TO CART" white buttons showed in the image or anything under its hitbox).

I think the problem is caused because I set width 100%; display: flex so I am wondering if there is a solution for centering the black buttons without setting a display: flex div without the div taking full width and preventing me to click or if I can disable the outer div clickability but preserving both the page under that div and the black buttons clickability.

(I have already tried playing with minor z-index in innerDiv that in outerDiv)

Maybe is useful to let you know that I am using React, Scss and StyledComponents

Use `position:relative;` and `z-index:1;` on `#innerDiv` – om_jaipur Dec 11 '19 at 13:47 — om_jaipur, Dec 11 '19 at 13:47
@webomjaipur I've already tried that :c – Alvaro Puertas Dec 11 '19 at 13:49 — Alvaro Puertas, Dec 11 '19 at 13:49
Can you share online link or compiled HTML code? – om_jaipur Dec 11 '19 at 13:50 — om_jaipur, Dec 11 '19 at 13:50

score 1 · Answer 1 · answered Dec 11 '19 at 13:52

1

Check this post How to disable clicking inside div

Try by adding this to the outter div:

pointer-events: none

answered Dec 11 '19 at 13:52

Ricardo Sanchez

4,935
11
56
86

score 1 · Accepted Answer · answered Dec 11 '19 at 13:53

1

You can set the CSS property pointer-events to none on the outer div, and also set it to auto on the black button to do this.

answered Dec 11 '19 at 13:53

Florian Callewaert

354
1
7

score 0 · Answer 3 · answered Dec 11 '19 at 13:52

0

It's because of the width: 100% on #outerdiv

Set #outerdiv { width: auto; margin: 0 auto; } to center it

answered Dec 11 '19 at 13:52

limco

1,310
1
15
24

it does not get centered. it appears on the far left, not in the middle – Alvaro Puertas Dec 11 '19 at 14:00
That's because you have position: fixed. In that case, you can set a fixed width to it, then left: calc(50% - (fixed-width/2)) – limco Dec 11 '19 at 14:07

How to center div in middle of screen. Or, if using flexbox, how to disable outer div clickability but preserves inner div clickability?

3 Answers3