Html - I am trying to center my images for my personal website but I am having difficulty doing

Max
August 9, 2023
139 views
0 votes
2 Answers

So basically I am having trouble centering my images and I wanted to know what I could take away or add to center them. I have been having difficulty as I use justify center and other properties as well. My first image is stuff to the end f my page and I want to move it over just a little so it’s away from the margin line and my header is also covering my middle image. So basically I want to know how I can fix this issue as I try to finish my about me page thanks.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Personal Project</title>

    <!--  bootstrap and aos  -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/aos.css">

    <!--  css   -->
    <link rel="stylesheet" href="assets/css/style.css">

    <!--    https://github.com/SA7MAN/brooklyn-complete   -->
</head>

<body>

    <nav class="navbar sticky-top navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link-home" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Projects</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <section id="mainPage">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="main-display">
                        <h1 id="name-title">Mazin Esmail</h1>
                        <h2>Software Developer</h2>
                        <h2>Student</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
            
    <section id="about-me">
        <div class="container">
            <div class="row">
                <div class="heading-about">
                    <h1 id="aboutme" class="display-5">About me</h1>
                    <p id="border-line-about"></p>  
                </div>
                <div class="about-page-text">
                    <h1 id="content-text" class="display-5"></h1>
                    
                    
                </div>
            </div>
        </div>
    </section>

    <div class="about-me-pics">
        <figure>
            <figure id="las-vegas-pic">
                <img src="https://lh3.googleusercontent.com/pw/AIL4fc8qdQ8Vk4EjS-WJmam9QHz4gAHxNPmlj5PXz_XZW4sYMaHz9VXtZ_JqSX9gj6c8z3lS-Vt-pUAEE7TmPOy1lAFTfyjPFV30Op0nftB2UNislwE0509TxdB-pL7SkgBuJmtO6VsA9p5L_t7jt9h1-KGEFbyEbMBOeC_F_FzSUe8bZYroUej0_lkfpnUVn_iB7BVDSRcxAIr71mXJZTv9YBWQZpxLuyCXyfVCUs20HhkN2qIxccrzQbZlgsDUJhpWgqD1OzwVIqLSsSSWxmkY5lxvX3m6xHYERTSHwMzm71Ll8AUc4qj67vKyO3flFP2DGel2FLW8hhm4tJ_l3utMWl6xr7Xc8gV6sM0kutpUICi7uiIMw9YlgOU9k_xDJ4asMA42chM8LCMRA97hPlypIuAtnp9c9etvFjjppZk0VVDlnfICSMVueWkoXtaXahjktDPJ_uke0Z59W4rWm6KgSo6wVD5Ei5J3D9_nwExGC6eMdRSWME-Y4RymGOerOYmUyOVBoYCQu-ezJbi-_Nihq6yZaX0XxeZERVH5S5XwtkhR5DglsYIrkzU7jKmhT3JgPqkyLRxqBIH_t1tD2KHLXi5mF8MUtSRRVBcmKfivXFpJnSUGvcKXPXebdEeds4yCRwRWh2DWsjVrY9ZSAtOvrBa1AeiIp4EtAU6fG8xyv7b6OC8ezir-luGV3athyHVb-UAgBJHSKuycdiEHJ5QmRfSNvifYQ8QauJo2rhZ3UF2DR1-Pq5DlvZqvNF3y1g8zkdbZCKohSe8iPrD6GsbfqKYE16v6Vh4yReGezm8V3iukafC_Ds8ZDXgW8bJiAM3qhxOR7azNxdmTW3G7AQrM_VVMEwDZqoISAGxprxJifR_K8lPKl5ueTehTD9ZObRv8WvPyAeBGYTsJo-sbJXgZ=w2186-h1640-s-no?authuser=0" height="400" width="350"/>
                <figcaption>Las Vegas,Nevada</figcaption>
                
            </figure>

            <figure id="basketball-pic">
                <img src="https://lh3.googleusercontent.com/pw/AIL4fc-pfdWd5lnospiqJy-bzkxL6FqpxZMGL29BRhPWqxZg9cDHlOSv8tljkeQdR_z6i9YegJBXgS-qvVoAZoXN4Fx0gNiPv2X8Vpy4PkxF2ST3k5rPuV41nBpxmn3jrVjoGI1HZWLEpHa5cYaQ0QQk-WN63jragd0fbOalvI60QGM5zTaaiaBfhCaOuXgXCZBSGp8MoVe8b9fCPedYRWVwgYUR7zfbvuebfeCSE20v_EzcTkFwY-ZL3sjkOBycWmORcJmqORkWx9-D4FSmrMZbWzUlEHJ0gOXW84yq4Bl7PGEV9yZtoxdZ8JC5Jj3_saEepbMi8zDUcQf60n9KirEw2klfxq1BqosrETfNohnnftzwvv3xmx8LoO108Co4EdXYekzARd_UsGXjWywt1NJ1DH0Y2r1WBJMoYwS72ejX4QMiNrHrQOJtbS7D-va7PEitnkF52FO1Fw5UM9_gd_hd0a0DCoQ-gQ026zYR7GJE980li_weB0zWPom6Il3fnMs0vMg3LJcFHHZdULf2mBIf2wlofW6ykI-yl3ZrYGdIvyl6homV84DnVXzdfsWgT99Z-UZyVh50-4b2mjDa_ugvNj0abUG9mTr5dIvd3LbX19oOHBDMGhKP6NNnmr_Cup_k8aGuolR8PtNLLrV93-04bREAZ5vjXq2NNDWxX1IA2XFIvKfMhCrqa6V2BvBepn-goD2Z1wyCS9-Y0kQjbGXNeyjCIjdlAYW1ZopKqO4QkIYtOCz5GckW2kICgP3WajbqN1uWoWjsrMTTzl-y7nAhVnu1W4PBkjd6-80OKDz4wva5Agg0XiSxUQnZeyzxMDF2GWUp2FSlyVruPUShvpkLMzXZ6uY0ZDPJ52zZKjM337kw8oEs2S3YYiUNp6gE3zFhVamAsHTAact95hJJHBrS=w918-h1640-s-no?authuser=0" height="400" width="350"/>
                <figcaption>Fontana, California</figcaption>
                
            </figure>
         
        </figure>
        
        
    </div>
</div>
</div>
</section>

    

       

    <!--  bootstrap and aos js  -->
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="https://kit.fontawesome.com/8c2adfc9c1.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
    <script>
        AOS.init();
    </script>
</body>
</html>

MyCSS




.navbar {
    position: absolute;
    top: 0;
    left: 38%;
    translate: -50;
    height: 80px;
    display: flex;
    align-items: center;
    font-size: 120%;
   
    
}
.nav-link-home{
    text-decoration: none;
   
   
}
.nav-link{
    color: white;
    text-decoration: none;
   
    }
.navbar *{
    display: inline;
    font-size: 100%;
    
    }

@font-face {
    font-family: Oswald;
    src: url("../fonts/Oswald-Medium.ttf");
   }

*{
    font-family: Oswald, serif;
}

html{
    scroll-behavior: smooth;
    }
    .nav-item{
        color: white;
        text-decoration: none;
    }
.nav-link-home{
    color: white;
}
    
#mainPage{
    background-image: url(https://www.pixelstalk.net/wp-content/uploads/images1/Shadows-Backgrounds-HD.jpg);
    min-height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: center;
    color:aliceblue;
    }

.main-display{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin-top: 10px;
    min-height: 120vh;
    text-align: center;
    font-family: sans-serif;
    animation: fadeInOut;
    animation-iteration-count: 2;
    animation-duration: 3s;
    }
    @keyframes fadeInOut {
        0%, 100% { opacity: 0; }
        50% { opacity: 1; }
    }
    
#about-me{
    background-color: tomato;
    min-height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: center;
    display:grid;
    place-items: center;
    text-align: center;
    
    
    }

#border-line-about{
    position: relative;
    top: 100%;
    left: 22%;
    margin-top: 90vh;
 }

#content-text{
    justify-content: center;
    text-align: center;
    position: relative;
    top: -888%;
    left: -42%;
  
  
    
}
.about-me-pics {
    margin-top: 70px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    display: grid;
    position: absolute; 
    transform: translate(-20%,-10%);
    bottom: -600px;
    left:140px;
   height: auto;
   width: 10px;  
height: auto;  
text-align: center;  
padding: 50px;  
}

#las-vegas-pic {
transform:translate(400px,9%);
align-items: center;
display: block;
position:absolute;
inset:0;
margin: auto;
margin-top: auto;
margin-bottom: auto;
flex-direction: row;
}
#Basketball-pic{
    transform:translate(40px,5%);
    text-align: center; 
    display: block;
    position:absolute;
    inset:0;
    margin: auto;
    flex-direction: row;
    align-items: center;

  
}

Tags: css html

Answers

Since you are using Bootstrap for your project, it’s a great idea to refer to Bootstrap’s official documentation and examples to get a better understanding of the framework and its features.

I made several improvements and changes to your code which you can download files here Personal-Project or alternatively here, compare the code changes quickest is to use version control. Here’s a quick summary of the changes I made and what was fixed in your code:

Navbar Markup and Styling:

The new code uses Bootstrap 5.3.1 for the navbar, simplifying the markup and styling.
The navigation links are now contained within a <ul> element with the class nav-links.
The navigation toggle for mobile devices is implemented using a hamburger icon.

Smooth Scrolling and Active Links:

JavaScript code has been added to handle smooth scrolling when clicking on navigation links.
The active navigation link is now underlined when clicked.

Reorganized HTML Sections:

The HTML sections have been reorganized and structured more clearly, making it easier to follow.

About Me Pics Grid:

The new code uses a CSS Grid layout for arranging the images in the "about-me-pics" section.
Media queries are used to adjust the grid layout for different screen sizes.

Responsive Design:

The new code implements responsive design by using media queries and Bootstrap classes to ensure the website looks and functions well on various devices and screen sizes.
The navigation menu collapses into a mobile-friendly version for smaller screens.

Font and Text Styling:

Font styling has been centralized using CSS variables, making it easier to manage and adjust.

Semantic HTML Elements:

The new code uses semantic HTML elements like , , and for improved accessibility and structure.

Removed Unused CSS:

The new code has removed some of the unnecessary or redundant CSS rules from the old code.

Improved Image Positioning:

The new code uses CSS Flexbox properties to center-align the images in the "about-me-pics" section.
Media queries and flexible column layouts ensure the images are responsive and adapt to different screen sizes.

Overall, the updated code addresses the issues with image alignment and navigation menu styling that you are having difficulty with. It adopts a more modern and responsive approach by utilizing Bootstrap classes and implementing a clean and organized structure.

The use of CSS Grid and Flexbox for layout and positioning contributes to better alignment and responsiveness of the images in the "about-me-pics" section.

Additionally, as a bonus I added some JavaScript to enhance the navigation menu behavior, ensuring a smoother and more user-friendly experience across different devices.

Hopefully, this helps.

/* Common Styles */

:root {
  --margin-top-small: 20px;
  --margin-top-medium: 50px;
  --margin-top-large: 100px;
  --font-family: Oswald, sans-serif;
  --header-font-size: 120%;
  --nav-link-color: white;
  --text-color: aliceblue;
  --navbar-bg-color: #f8f9fa5b;
  --navbar-text-color: #343a40;
  --navbar-toggle-icon-size: 30px;
}

@font-face {
  font-family: Oswald;
  src: url("../fonts/Oswald-Medium.ttf");
}


/* General Text Styles */

* {
  font-family: var(--font-family);
}

html {
  scroll-behavior: smooth;
}


/* Navigation Menu */

.custom-navbar {
  position: sticky;
  top: 0;
  background-color: var(--navbar-bg-color);
  z-index: 1000;
}

.nav-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-toggle {
  cursor: pointer;
  display: none;
  border: 1px solid lightgray;
  padding: 10px;
}

.nav-toggle-icon {
  width: var(--navbar-toggle-icon-size);
  height: 3px;
  background-color: var(--navbar-text-color);
  margin: 4px 0;
  transition: transform 0.3s;
  position: relative;
}

.nav-toggle-icon:before,
.nav-toggle-icon:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: var(--navbar-text-color);
  transition: transform 0.3s;
}

.nav-toggle-icon:before {
  top: -8px;
}

.nav-toggle-icon:after {
  top: 8px;
}

.nav-toggle.active .nav-toggle-icon:before {
  transform: rotate(45deg) translate(5px, 5px);
  background-color: transparent;
}

.nav-toggle.active .nav-toggle-icon:after {
  transform: rotate(-45deg) translate(5px, -5px);
  background-color: transparent;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-links li a {
  text-decoration: none;
  color: var(--navbar-text-color);
}

.nav-link.active a {
  text-decoration: underline;
}


/* Responsive Styles */

@media (max-width: 768px) {
  .nav-container {
    justify-content: flex-start;
    /* Adjusted for mobile */
    padding: 10px 20px;
  }
  .nav-toggle {
    display: block;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    background-color: var(--navbar-bg-color);
    width: 100%;
    left: 0;
    top: 100%;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .nav-links.active {
    display: flex;
  }
  .nav-links li {
    margin-bottom: 10px;
  }
  .nav-links li a {
    text-decoration: none;
    color: var(--nav-link-color);
  }
}

#mainPage {
  background-image: url(https://www.pixelstalk.net/wp-content/uploads/images1/Shadows-Backgrounds-HD.jpg);
  min-height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  color: var(--text-color);
}

.main-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: sans-serif;
  animation: fadeInOut;
  animation-iteration-count: 2;
  animation-duration: 3s;
}

@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

#about-me {
  background-color: tomato;
  min-height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  display: grid;
  text-align: center;
}

.heading-about {
  margin-top: var(--margin-top-medium);
}


/* About Me Pics Grid */

.about-me-pics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  justify-items: center;
  margin-top: var(--margin-top-medium);
}

@media (max-width: 768px) {
  .about-me-pics {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .about-me-pics {
    grid-template-columns: 1fr;
  }
}


/* About Me Pics Images */

.about-me-pics figure {
  margin: 0;
  text-align: center;
}

.about-me-pics figure img {
  max-width: 100%;
  object-fit: cover;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Personal Project</title>

  <!--  bootstrap and aos  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/css/bootstrap.min.css" integrity="sha512-Z/def5z5u2aR89OuzYcxmDJ0Bnd5V1cKqBEbvLOiUNWdg9PQeXVvXLI90SE4QOHGlfLqUnDNVAYyZi8UwUTmWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.css" integrity="sha512-1cK78a1o+ht2JcaW6g8OXYwqpev9+6GqOkz9xmBN9iUUhIndKtxwILGWYOSibOKjLsEdjyjZvYDq/cZwNeak0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <!--  css   -->
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <nav class="custom-navbar">
    <div class="nav-container">
      <a class="navbar-brand" href="#">
        <!-- Brand content -->
      </a>
      <div class="nav-toggle">
        <div class="nav-toggle-icon"></div>
      </div>
      <ul class="nav-links">
        <li class="nav-link"><a href="#mainPage">Home</a></li>
        <li class="nav-link"><a href="#aboutme">About</a></li>
        <li class="nav-link"><a href="#my-projects">Projects</a></li>
      </ul>
    </div>
  </nav>

  <section id="mainPage">
    <div class="container">
      <div class="row">
        <div class="col-lg-6">
          <div class="main-display">
            <h1 id="name-title">Mazin Esmail</h1>
            <h2>Software Developer</h2>
            <h2>Student</h2>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="about-me">
    <div class="container">
      <div class="heading-about">
        <h2 id="aboutme" class="display-6">About me</h2>
        <p id="border-line-about">
          Remember, these are just suggestions, and you might need to adjust the values based on your design preferences and requirements. After making these adjustments, your images should be centered, and your header should no longer overlap with the middle image.
          If you encounter further issues, feel free to ask for more assistance!
        </p>
      </div>
    </div>

    <div class="container">
      <div class="about-page-text mb-0 mt-3">
        <h2 class="display-6">
          Projects
        </h2>
      </div>
      <div class="about-me-pics row" id="my-projects">
        <figure id="las-vegas-pic">
          <img src="https://images.unsplash.com/photo-1661956602926-db6b25f75947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHx8&auto=format&fit=crop&w=600&q=60" alt="las-vegas-pic" height="400" width="350" />
          <figcaption>Las Vegas,Nevada</figcaption>
        </figure>

        <figure id="basketball-pic">
          <img src="https://plus.unsplash.com/premium_photo-1674671748477-5354897d35c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8&auto=format&fit=crop&w=600&q=60" alt="basketball-pic" height="400" width="350" />
          <figcaption>Fontana, California</figcaption>
        </figure>

        <figure id="basketball-pic-2">
          <img src="https://images.unsplash.com/photo-1661956602139-ec64991b8b16?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwyMXx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="basketball-pic-2" height="400" width="350" />
          <figcaption>Fontana, California</figcaption>
        </figure>

        <figure id="basketball-pic-3">
          <img src="https://images.unsplash.com/photo-1661956602116-aa6865609028?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwyNnx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="basketball-pic-3" height="400" width="350" />
          <figcaption>Fontana, California</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <!--  bootstrap and aos js  -->
  <script src="assets/js/bootstrap.bundle.min.js"></script>
  <script src="https://kit.fontawesome.com/8c2adfc9c1.js" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.1/aos.js" integrity="sha512-RmCE+nEdKZ45TpbCJgvYvfEDz3XaiGmTTJl6GfyITW3fouks4lNTOkoMXWJ9WA6aQO+3FV8cjA6fvTosOgbCrg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    AOS.init();

    document.addEventListener("DOMContentLoaded", function() {

      // Mobile navigation toggle and menu
      const toggle = document.querySelector(".nav-toggle");
      const links = document.querySelector(".nav-links");
      const navbar = document.querySelector(".custom-navbar");

      // Toggle button click event
      toggle.addEventListener("click", function() {
        links.classList.toggle("active");
        toggle.classList.toggle("active");
      });

      // Click event to close toggle menu when clicking outside nav
      document.addEventListener("click", function(event) {
        const target = event.target;

        if (!navbar.contains(target) && !target.classList.contains("nav-link")) {
          links.classList.remove("active");
          toggle.classList.remove("active");
        }
      });

      // Smooth scrolling for anchor links and update active class
      const navLinks = document.querySelectorAll(".nav-link a");

      navLinks.forEach(link => {
        link.addEventListener("click", function(event) {
          event.preventDefault();

          const target = document.querySelector(this.getAttribute("href"));
          const offset = 100;

          window.scrollTo({
            top: target.offsetTop - offset,
            behavior: "smooth"
          });

          // Update active class on navigation links
          navLinks.forEach(navLink => navLink.parentElement.classList.remove("active"));
          this.parentElement.classList.add("active");
        });
      });
    });
  </script>
</body>

</html>

- AnupamM
- August 9, 2023 at 12:36 am
- 0 votes
0
First of all you’re using Bootstrap library so you don’t have to write custom css for it. Just you’ve to use the code to centre the image
```
<img src="..." class="rounded mx-auto d-block" alt="...">
```
Check the link
But before it you’ve follow the structure of Bootstrap like
You can declare a container within section but code should be looks like below
```
<section>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <img src="..." class="rounded mx-auto d-block" alt="...">
            </div>
        </div>
    </div>
</section>
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – I am trying to center my images for my personal website but I am having difficulty doing

Answers