CODEWITHSUNDEEP
htmlcssreactjs
Rishabh Raghwendra
Rishabh Raghwendra

Reputation: 320

How to give equal margins in all directions to a flexbox?

I am working on a Reactjs project . I have a div (#up-coming-events) of display:flex . I want to give it equal margins in all directions . So I applied margin:auto , but however it's not giving margin to top and bottom . It's only giving margin to left and right side . Here's my code :- UpCommingEvent.js :-

import React from "react";
import "./styles/upcommingevent.css"
function UpCommingEvent() {
  return (
    <div id="up-coming-events">
      <div id="event-thumbnail"></div>
      <p>hello upComming eventts here</p>
    </div>
  );
}

export default UpCommingEvent;

upcommingevent.css:-

#up-coming-events {
  width: 88rem;
  margin: auto; /*Not giving margins in to top and bottom */
  height: 35rem;
  border: 2px solid white;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2.875rem;
}
#event-thumbnail {
  width: 38.7rem;
  height: 23.6rem;
  border-radius: 30px;
  background-color: grey;
}

I am thinking to hard code the top & bottom margins , equal to the left & right margins , but I think there will be a more smarter & efficient way to do it .

May anyone tell me what that smarter & efficient way is ?

Thanks

Upvotes: 1

Views: 892

Answers (3)

StepUp
StepUp

Reputation: 38094

You can set margin explicitly:

#up-coming-events {
  width: 88rem;
  margin: 1rem; 
  height: 35rem;
  border: 2px solid white;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2.875rem;
}
#event-thumbnail {
  width: 38.7rem;
  height: 23.6rem;
  border-radius: 30px;
  background-color: grey;
}

and this is of the recommended ways

Upvotes: 1

user8484970
user8484970

Reputation:

If you’re using flex box, then you can align anything (vertically or horizontally) quite painlessly with the align-items, align-self, and justify-content properties. Phil Walton does a great job describing the solution:

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Upvotes: 0

Arael D. Espinosa P&#233;rez
Arael D. Espinosa P&#233;rez

Reputation: 421

The margin auto only work for lateral margin properties. If you want set the same margin you should use a relative margin like value%.

Upvotes: 0

Related Questions