Html - How to move div to the right center of screen?

BogdanMieldzicz
November 3, 2023
202 views
0 votes
2 Answers

Im trying to keep the the github, linkedin and twitter icons in the spot where they are and im just trying to move the 3 paragraphs to the right side of the screen.

my html looks like this

div.social {
  margin-top: 9rem;
  margin-left: 15rem;
}

div.social ul {
  display: flex;
  grid-gap: 1.5rem;
}

div.aboutme {
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
  grid-gap: 1rem;
  justify-content: flex-end;
}

div.aboutme p.about {
  display: inline-block;
}

<body>
  <div class="container">
    <div class="Intro">
      <h1 class="Name"><strong>Bogdan Mieldzicz</strong></h1>
      <h3 class="Title"><strong>Computer Science Major</strong></h3>
      <p class="Bio">I am currently studying <em>computer science</em>,<br>at <em>Queens College</em></p>
      <nav class="navbar">
        <ul>
          <li><a href="./index.html">About</a></li>
          <li><a href="#">Experinces</a></li>
          <li><a href="#">Projects</a></li>
        </ul>
      </nav>
    </div>
    <div class="social">
      <ul>
        <li><a href="https://github.com/Bodzik1"><i class="fa-brands fa-github fa-xl" style="color: #ffffff;"></i></a></li>
        <li><a href="https://www.linkedin.com/in/bogdan-mieldzicz/"><i class="fa-brands fa-linkedin fa-xl" style="color: #ffffff;"></i></a></li>
        <li><a href=""><i class="fa-brands fa-twitter fa-xl" style="color: #ffffff;"></i></a></li>
      </ul>
    </div>
    <div class="aboutme">
      <p></p>
      <p></p>
      <p></p>
    </div>

Tags: css html

Answers

For the sake of understanding, I’ve ignored class social as I’m not sure about where you want to place it.

provide a common outer element and place both the div inside and display property of the outer element should be flex.

And the margin-left and margin-right of the inner elements should be auto. Inner elements’ width should be less than 50%.

See my example where I’ve provided an outer element section. Please see the html and css. Understand the concept and modify accordingly.

<head>
<style>
body{
 width 100%;
 }
section{
 display:flex;
 }
.me{
 width 45%;
 margin: 0 auto;
}
.aboutme{
  width :45%;
  margin: 0 auto;
 }
</style>

</head>
<body>
    <section>

      <div class="me">
        <h1>My Name</h1>
        <h2>Computer Science Major</h2>
        <h3>Lorem ipsum dolor sit amet.</h3>
        <h4>Lorem ipsum dolor sit amet.</h4>
      </div>


<div class="socialmedia"></div>

  <div class="aboutme">
Lorem ipsum dolor sit amet. Ut modi enim non explicabo natus ab voluptatum incidunt quo quibusdam eius et exercitationem dolore rem quod doloremque ut beatae odit. Sit vero cumque hic quia molestiae cum harum voluptas qui illum dolorem aut fugiat laudantium et quibusdam internos? Est maiores dolorem est reiciendis inventore ex quidem sunt est dicta aliquid aut accusamus velit. Sit vero distinctio ut dolores facere aut expedita omnis eos nulla consectetur ut fuga assumenda vel architecto tempore qui explicabo alias.
     </div>
   </section>
</body>

I scraped this down to the bare minimum.

Removed style=" from all the HTML, put it in CSS if you need it.
You were not using the ul li as lists so why not just use divs and spans
You were not using the paragraphs as paragraphs since you changed the display so why not just use a set of block elements (div) and apply the style to that.
Created classes called nnn-container to better illustrate the intent
added ugly borders just to show what is where – they can be removed

.container { display: grid; place-items: center; } just "super centers" the containers inside that container then I added a margin css margin-left: auto; to the last one to move it to the right.

Your image had some additional style like background but that was not supplied so I just used what was.

.container {
  display: grid;
  place-items: center;
}

.intro-container {
  border: solid #0000FF 1px;
}

.social-container {
  border: solid #00FF00 1px;
  margin-top: 3em;
}

.aboutme-container {
  border: solid #ff00ff 1px;
  width: 50%;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  grid-gap: 1rem;
}

.social-container .social-links {
  display: flex;
  grid-gap: 1.5rem;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<div class="container">
  <div class="Intro intro-container">
    <h1 class="Name"><strong>Bogdan Mieldzicz</strong></h1>
    <h3 class="Title"><strong>Computer Science Major</strong></h3>
    <p class="Bio">I am currently studying <em>computer science</em>,<br>at <em>Queens College</em></p>
    <nav class="navbar">
      <div>
        <span><a href="./index.html">About</a></span>
        <span><a href="#">Experinces</a></span>
        <span><a href="#">Projects</a></span>
      </div>
    </nav>
  </div>
  <div class="social social-container">
    <div class="social-links">
      <div><a href="https://github.com/Bodzik1"><i class="fa-brands fa-github fa-xl" ></i></a></div>
      <div><a href="https://www.linkedin.com/in/bogdan-mieldzicz/"><i class="fa-brands fa-linkedin fa-xl" ></i></a></div>
      <div><a href=""><i class="fa-brands fa-twitter fa-xl" ></i></a></div>
    </div>
  </div>
  <div class="aboutme aboutme-container">
    <div>move me please</div>
    <div>I am here now just because I am here now I typed longer text just to make it wrap somewhat. I am here now just because I am here now I typed longer text just to make it wrap somewhat.I am here now just because I am here now I typed longer text just
      to make it wrap somewhat.I am here now just because I am here now I typed longer text just to make it wrap somewhat.I am here now just because I am here now I typed longer text just to make it wrap somewhat.I am here now just because I am here now
      I typed longer text just to make it wrap somewhat.</div>
    <div>Last of the paragraph warriors.</div>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to move div to the right center of screen?

Answers