Can a Flex Container be Centered?

ahr aitch · September 17, 2023

I'm working to understand how to use a Flexbox and the related CSS and HTML statements. For the moment, ignore the pic, birthdate and birthplace containers but I'm sure I will have questions about placing them later. Right now, I want to know if it is possible to center the container itself onscreen, and, if so, how to do it.

Somebody please tell me if I'm not sharing my code correctly. I'm new here and learning.

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" 
    charset=UTF-8>
    <link rel="stylesheet" type="text/css" 
    href="styles.css" media="screen" />
      <title="the-clan"></title>
  </head>
  <body> 

    <div class="flex-container">container
      <div class="name">name</div>
      <div class="photo">pic</div>
      <div class="birth">birthdate</div>
      <div class="birth-details">birthplace</div>
    </div>



</html>

/*  This code is NOT in the HTML file but is a separate file named styles.css */

.flex-container {
  display: flex;
  background-color: rgb(228, 219, 209);
  left: 19%;
  right: 17%;
  border-style:ridge; 
  border-width:5px;
  border-radius:20px;
  width: 860px;
  height: 490px;

}

.flex-container > div
{
  display: flex;
  position:relative;
  
  margin-top: 0.05%;
  margin-bottom:2%;
  border-style:ridge; 
  border-width:5px;
  border-radius:20px;
  width:600px;
  height:470px;
  background-color:rgb(228, 219, 209);
  text-align:center;
  font-size:14px;
  font-family:Verdana;
}

.name
{
  display: inline-flex;
  position: relative;
  top: 20px;
  right: 27.7%;
  width: 400px;
  height: 30px;
  border-style:line; 
  border-width:.5px; 
  padding-top: 2px;
  background-color: #fff;
  color: em#2d18c6;
  border-radius:5px;
  text-align:center;
  font-size: 22px;
}
  
.photo
{
  display: inline-flex;
  width: 250px;
  height: 250px;
  border-style:ridge;
  border-radius: 5px; 
  border-width:2.5px; 
  background-color: #fff;
  text-align:center;
}

.birth
{
  display: inline-flex;
  margin-left: 40%;
  margin-right: 40%;
  border-style:ridge;
  border-radius: 5px;
  border-width: .5px;
  padding-left: 10px;
  padding-top: 20px;
  text-align: left;
  font-family:'Franklin Gothic Medium';
  font-size: small;
  height: 35px;
  width: 60px;
} */

/*.birth*//*FIXED [if exists BIRTH]
  <div class="birth-square"> </div>*/
.birth-details
{
  display: inline-flex;
  margin-left: 40%;
  border-style:ridge;
  border-radius: 5px; 
  border-width: .5px; 
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 1px;
  text-align: left;
  font-family:'Franklin Gothic Medium';
  font-size: small;
  height: 57px;
  width: 400px;
}/*

Edited September 17, 2023 by ahr aitch
clarity

Ingolme · September 17, 2023

A flex container is a block element by default. The way to center blocks is to set the left and right margins to "auto" like in this code:

.flex-container {
  display: flex;
  width: 600px;
  margin-left: auto;
  margin-right: auto;
}

ahr aitch · September 17, 2023

Thanks!

Sign In

Can a Flex Container be Centered?

Recommended Posts

ahr aitch

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

ahr aitch

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity