Question 44397 in Html Question posted in
Some basic documentation can be found here.

Issue aligning divs horizontally within two parent divs – Html

I’m trying to line up three div tags that contain linked images for social icons on a portfolio website. I’ve been able to get them next to each other, but have only been able to get them evenly spaced across the container div, but I want them to be justified to the center. This is hard to explain, so I’ve attached a diagram to make it clearer. The issue may have something to do with the container divs I’ve used, but I’d love any help trying to solve this. Below is the code I’ve used, with very little removed so as to give further context to the problem:

<!DOCTYPE html>
<html lang="en">
<style>
html {
    background-color: black;
    padding: 0%;
}
body {
    margin: 0%;
}
#leftWrapper {
    color: white;
    width: 30%;
    height: 100%;
    position: absolute;
    margin: 0%;
    padding: 0%;
    text-align: center;
    font-family: 'Trebuchet MS';
}
#leftVertWrapper {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#socialIconBigWrapper {
    display: flex;
}
.socialIconWrapper {
    flex: 20%;
    padding: 5px;
    box-align: 'justify-self';
}
.socialIcon {
    width: 30%;
}
</style>
    <body>
        <div id="leftWrapper">
            <div id="leftVertWrapper">
                <div id="socialIconBigWrapper">
                    <div class="socialIconWrapper" style="float: left;">
                        <a style="text-decoration: none;" href="">
                            <img class="socialIcon" src="linkedinIcon.png">
                        </a>
                    </div>
                    <div class="socialIconWrapper" style="float: left;">
                        <a style="text-decoration: none;" href="">
                            <img class="socialIcon" src="twitterIcon.png">
                        </a>
                    </div>    
                    <div class="socialIconWrapper" style="float: left;">
                        <a style="text-decoration: none;" href="">
                            <img class="socialIcon" src="githubIcon.png">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

I’ve tried using tables and messing around with padding and margins, as well as using float: left; and display: inline-block. When using a table, the image size automatically centers itself by adding empty space to the sides of the image to make it wider. This achieves the first effect shown in the diagram, and no padding or margin changes can fix it. Using float just moves all of the images to one side of the div, without putting them next to each other, and display: inline-block; changed nothing.

Tags:

2

Answers


  1. 0

    Adding 2 lines of code to #leftWrapper will align the icons in the center:

    #leftWrapper {
    color: white;
    width: 30%;
    height: 100%;
    position: absolute;
    margin: 0%;
    padding: 0%;
    text-align: center;
    font-family: 'Trebuchet MS';

    /*added line of code below this comment*/
    display: flex;
    justify-content: center;

    Is this what you ment? I could not find the diagram you mentioned in the text.

    Login or Signup to reply.
  2. 0

    I understand you are trying to center three div tags containing linked images for social icons on your portfolio website. I appreciate the effort you’ve put into explaining the issue. It sounds like you have been able to get the div tags next to each other but are having trouble centering them within the container div.

    One solution you might want to try is adding display: flex to the container div’s CSS and then using justify-content: center to center the three div tags horizontally.

    Here is a similar example

    body {
  width: 100%;
  height: 100vh;
  border: 1px solid red;
}

main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  margin: 5px;
}

.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid green;
  margin: 5px;
}

.icon-container .icon {
  width: 50px;
  height: 50px;
  margin: 0px 5px;
}

.icon-container .icon img {
  width: 100%;
  height: 100%;
  object-fit: containe;
}
    <!DOCTYPE html>
<html lang="en">

<body>
  <main>
    <div class="icon-container">
      <div class="icon">
        <a href="www.facebook.com">
          <img src="https://cdn-icons-png.flaticon.com/128/3670/3670124.png" />
        </a>
      </div>
      <div class="icon">
        <a href="www.twitter.com">
          <img src="https://cdn-icons-png.flaticon.com/128/3670/3670127.png" />
        </a>
      </div>
      <div class="icon">
        <a href="www.instagram.com">
          <img src="https://cdn-icons-png.flaticon.com/128/3670/3670125.png" />
        </a>
      </div>
    </div>
  </main>
</body>

</html>

    I recommend checking out this helpful resource: https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search