How can I position elements left, center, and right?

Question

I am sorry if my question is a bit silly, but It's like my 3rd day of learning html/CSS. Please do not advice me to use JS, cos I have no idea about it (yet). I need to move li elements across the screen, like 1 element has to stick to the left side of the page, another to the middle and the third to the right side. If I am not expressing myself clear please see the screenshot. Thanks!

The screenshot

.contact-information-main-container {
  width: 100%;
  font-size: 3vw;
}

.contact-information {
  width: 100%;
  margin: auto;
}
.contact-information-title {
  font-weight: 500;
  text-align: center;
  width: 100%;
}
.contact-information-item {
  /* float: left; */
  font-family: "Langar";
  height: auto;
  padding-top: 1%;
}

.contact-link {
  margin-left: 1%;
}
#social-media-facebook {
  margin-top: 1%;
  padding-left: 3%;
  list-style: none;
  background-image: url("../img/contact-images/facebook-new.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20%;
  display: inline;
}
#social-media-instagram {
  margin-top: 1%;
  padding-left: 3%;
  list-style: none;
  background-image: url("../img/contact-images/instagram.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20%;
  display: inline;
}
#social-media-whatsapp {
  margin-top: 1%;
  padding-left: 3%;
  list-style: none;
  background-image: url("../img/contact-images/whatsapp.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20%;
  display: inline;
}
#social-media-container {
  display: inline;
  margin: auto;
}
#social-media-title-ol {
  text-align: center;
}

<!-- contact information container -->
    <div id="social-media-container" class="contact-information">
        <ol id="social-media-title-ol" class="contact-information-title">Social</ol>
            <li id="social-media-facebook" class="contact-information-item">
                <a id="social-media-item" class="contact-link" href="https://facebook.com">Facebook</a>
            </li>
            <li id="social-media-instagram" class="contact-information-item">
                <a id="social-media-item" class="contact-link" href="https://instagram.com">Instagram</a>
            </li>
            <li id="social-media-whatsapp" class="contact-information-item">
                <a id="social-media-item" class="contact-link" href="https://web.whatsapp.com/">WhatsApp</a>
            </li>
    </div>

Please check out this https://medium.com/@jillplatts/6-minute-beginners-guide-to-css-flexbox-527b3ff3480b. Using flexbox you can position almost everything in css. — Altantur, Jan 03 '21 at 15:53

score 2 · Answer 1 · answered Jan 03 '21 at 16:00

2

You can use flexboxes : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Here you want a space-between alignment.

So in your CSS :

.contact-information {
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

answered Jan 03 '21 at 16:00

Arthur

173
1
1
11

score 0 · Answer 2 · edited Jan 03 '21 at 16:04

0

I have understood your query.

use flexbox. try this:

.contact-information-title {
  font-weight: 500;
  text-align: center;
  width: 100%;
  display : flex;
  justify-content : space-around;
}

edited Jan 03 '21 at 16:04

Dharman

30,962
25
85
135

answered Jan 03 '21 at 15:59

Tirtharaj Sinha

5
1
3

Some explanation (or an explanatory resource link) would make this much more useful. – isherwood Jan 03 '21 at 16:01

score 0 · Accepted Answer · answered Jan 03 '21 at 16:06

In html you had a mistake. Your ol tag was not closed in the right place. This is what you need to wrap your li tags. In my example, I fixed this.

I wrapped text Social in a div, giving him a class, with the css rule:

.social_text {
  text-align: center;
}

Css flex rules in selector #social-media-title-ol do this:

#social-media-title-ol {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

.contact-information-main-container {
  width: 100%;
  font-size: 3vw;
}

.social_text {
  text-align: center;
}

.contact-information {
  width: 100%;
  margin: auto;
}
.contact-information-title {
  font-weight: 500;
  text-align: center;
  width: 100%;
}
.contact-information-item {
  /* float: left; */
  font-family: "Langar";
  height: auto;
  padding-top: 1%;
}

.contact-link {
  margin-left: 1%;
}
#social-media-facebook {
  /*margin-top: 1%;*/
  /*padding-left: 3%;*/
  list-style: none;
  background-image: url("../img/contact-images/facebook-new.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20%;
  display: inline;
}
#social-media-instagram {
  /*margin-top: 1%;*/
 /*padding-left: 3%;*/
  list-style: none;
  background-image: url("../img/contact-images/instagram.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20%;
  display: inline;
}
#social-media-whatsapp {
  /*margin-top: 1%;*/
  /*padding-left: 3%;*/
  list-style: none;
  background-image: url("../img/contact-images/whatsapp.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20%;
  display: inline;
}
#social-media-container {
  display: inline;
  margin: auto;
}
#social-media-title-ol {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

<!-- contact information container -->
<div id="social-media-container" class="contact-information">
  <div class="social_text">Social</div>
  <ol id="social-media-title-ol" class="contact-information-title">
    <li id="social-media-facebook" class="contact-information-item">
      <a id="social-media-item" class="contact-link" href="https://facebook.com">Facebook</a>
    </li>
    <li id="social-media-instagram" class="contact-information-item">
      <a id="social-media-item" class="contact-link" href="https://instagram.com">Instagram</a>
    </li>
    <li id="social-media-whatsapp" class="contact-information-item">
      <a id="social-media-item" class="contact-link" href="https://web.whatsapp.com/">WhatsApp</a>
    </li>
  </ol>
</div>

score 0 · Answer 4 · answered Jan 03 '21 at 17:40

Alright guys, thank you all. It's sorted now. Unfortunately I don't have 15 reputation so I can't upvote any of the answers. How I solved it:

I closed my ol tag the right way, thanks s.kuznetsov for pointing at this.
Then I created a new div for social media items, once again thanks s.kuznetsov for the idea of new div.
Placed space-between in the new created div, thanks Arthur for the idea.

Once again thank you very much!

.social-media-items {
  display: flex;
  justify-content: space-between;
  margin-right: 1%;
}

<!-- contact information container -->
    <div id="social-media-container" class="contact-information">
        <ol id="social-media-title-ol" class="contact-information-title">Social
        
        <!-- social media items -->
        <div class="social-media-items">
            <li id="social-media-facebook" class="contact-information-item">
                <a id="social-media-item" class="contact-link" href="https://facebook.com">Facebook</a>
            </li>
            <li id="social-media-instagram" class="contact-information-item">
                <a id="social-media-item" class="contact-link" href="https://instagram.com">Instagram</a>
            </li>
            <li id="social-media-whatsapp" class="contact-information-item">
                <a id="social-media-item" class="contact-link" href="https://web.whatsapp.com/">WhatsApp</a>
            </li>
        </ol>
        </div>

How can I position elements left, center, and right?

4 Answers4