-1

I have a div that contains some text. I have it aligned centrally but when I reduce the width to 60% it goes to the left of the screen. How can I have my text aligned centre horizontally with its width reduced to 60%?

.tabcontent {
  padding: 6px 12px;
  border-top: none;
}

.tab-card{  
  text-align: center;
  justify-content: center;
  margin-top: 80px;
  width: 60%;
}
<div class="tabcontent">
  <div class="tab-card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  </div>
</div>
Tushar Shahi
  • 16,452
  • 1
  • 18
  • 39
seyet
  • 1,080
  • 4
  • 23
  • 42
  • Whenever posting code, please remove properties like display:none if you want people to actually see the style. Your page was completely empty. – Tushar Shahi Jul 08 '21 at 04:00
  • 1
    justify-content is a property of flex containers. Not something to be used unless you are using flexbox stylings. – Tushar Shahi Jul 08 '21 at 04:02

2 Answers2

1

You could remove the justify-content center and add margin to center horizontally.

Because the width is only 60%, the text can be centered inside of the div, but the div containing the text (your tab card) is only 60% of its container (tabcontent). If you don't specify otherwise, the tab card will be put at the beginning (left most) of tabcontent and only take up that 60% width. By saying margin 0 auto you're saying you want 0 margin in the top and bottom, and on the left and right equal margin to center the div within it's container.

See this css:

.tabcontent {
     padding: 6px 12px;
     border-top: none;
}
.tab-card {  
     text-align: center;
     margin: 0 auto;
     margin-top: 80px;
     width: 60%;
}

If you would like to use justify-content, you would need to justify the contents of the container to center. Additionally that container would need to have the display of flex. See below.

.tabcontent {
    display: flex;
    padding: 6px 12px;
    border-top: none;
    justify-content: center;
}

.tab-card{  
    text-align: center;
    margin-top: 80px;
    width: 60%;
}
zahlawi
  • 97
  • 8
0
.tab-card {
    text-align: center;
    justify-content: center;
    margin: 80px auto;
    width: 60%;
}
Ali Hamza Yaseen
  • 140
  • 2
  • 7