How to Get My Text Centered While Aligned to Left or Right

HTML-CSS
1

Hi folks,
I’m trying to center the contents of my div after it has been left-aligned, and it is not working. What I’m I doing wrong? Thanks in advance for your help.

See screenshot below:

Non-center-aligned%20text
Non-center-aligned%20text776×404 51 KB

Here is a link to my CodePen: https://codepen.io/IDCoder/pen/LBeXKG?editors=1100

Here is my code:

.skills-section{
  height: auto;
  background-color: #0099fe;
  margin: auto;
  position: relative;
  padding: 5px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  margin-top:15px;  
}

@import url('https://fonts.googleapis.com/css?family=Roboto');
#fck {
  color: red;
  font-size: 20px;
  text-align: left;
}

.parent {
  font-family: 'Roboto';
  counter-reset: my-counter;
  margin: auto;
}

.item {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 5px;
}
.item:before {
  color: white;
  background-color: #000;
  border-radius: 50%;
  counter-increment: my-counter;
  content: counter(my-counter);
  display: inline-block;
  height: 20px;
  line-height: 20px;
  left: 0;
  margin-right: 5px;
  position: absolute;
  text-align: center;
  width: 20px;
}

.notification{
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  left: 63%;
  background-color: #ff0000; 
}

#number{
  font-size: 1.5em;
  line-height: 0;
  position: absolute;
  top: 16px;
  left: 8px;
  color: white;
}



.skills-section:before{
  position: absolute;
  top: 0; 
  right:0;
  bottom: 80%;
  left: 0;    
  background: #0099fe;
}

#skills{
  line-height: .5em;
  text-align: center;
  font-size: 2em;
  padding-top: 30px;
  margin-top: 5px;
  text-transform: uppercase;
  color: #bfbdbd;
}

.skills-box{
  height: auto;
  padding: 15px;
  border: 1px solid #0099fe;
  margin-bottom: 15px;
  color: #5b5b5b;
  text-align: left;
}
2

Do you want to center the whole content or only the h1?

And an id is only for single use, you should change id="fck" to a class.

3

Hi @miku86, yeah, I want to center all the whole content.
I want to get it like this: http://jsfiddle.net/MenelikMakonnen/HRKN4/29/
Or like this: https://codepen.io/albpara/pen/KeoPxJ

4

I think you removed some code that you showed us in your question. But there is some code in that area, as far as i observed, i think you have styled the col-xs- elements too.

We should not do that it may break the code, and also i think you should clean your CSS, i can find some empty properties, it will break the styles

5

@Sujith3021, hi! Yes, I did…I had gone on to begin creating a fix, as I have zero patience hahah

See screenshot below:
Center-aligned%20text

My new code that centered it how I wanted is below:

@import url('https://fonts.googleapis.com/css?family=Roboto');
.fck {
  color: red;
  font-size: 20px;
  margin-left: 20%;
}

.parent {
  font-family: 'Roboto';
  counter-reset: my-counter;
  margin: 10px auto;
  margin-left: 30%
}

.item {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 5px;
}
6

I see you have aligned it to the center using margin, we shouldn’t do that, try resizing your browser a little, can you see the elements still in the center as you adjusted before. ?

7

Hi @Sujith3021, centering it using margin with percentages is the only way that I could get it to work. And, because it is a percentage of, no matter what size the box becomes, the text style with that css rule will be that percentage of the space. Yes, I did resizing of the browser, and it worked fine.

8

Screenshot%20from%202018-08-02%2013-06-13
Screenshot%20from%202018-08-02%2013-06-131366×768 324 KB

Are you sure…? Because when i resize…i could see the alignment misplaced… we will try a solution though… let me see

9

I think it’s fixed now, i removed all the margins in % and added this piece of code to the .skills-box

.skills-box {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}

Screenshot%20from%202018-08-02%2013-25-34
Screenshot%20from%202018-08-02%2013-25-341366×768 120 KB

10

@Sujith3021, thanks for this help! I didn’t think to use flex-box. I kind of don’t like flex-box, but I guess, now I definitely will get acquainted with it! Thanks again! Cheers!