Text-align:center property doesn't work how can ı fix it-CodePudding

I have 8 div and one of them is a parent element. I gave a display: flex property my parent, and ı wanna locate my all texts in the middle of my divs because of that ı use text-align property but it is doesn't work

.social-links {
  display: flex;
  flex-direction: row;
  position: relative;
  left: 225px;
  top: 163px;
  font-size: 10px;
  color: white;
  text-align: center;
}

<div >
     <div id="facebook" style="background-color: rgb(60,86,156);">Facebook</div>
     <div id="twitter" style="background-color: rgb(29,162,243);">Twitter</div>
     <div id="email" style="background-color: rgb(132,132,132);">Email</div>
     <div id="pinterest" style="background-color:rgb(199,33,39);">Pinterest</div>
     <div id="whatsapp" style="background-color:rgb(78,193,69);">Whatsapp</div>
     <div id="telegram" style="background-color:rgb(0,135,207);">Telegram</div>
     <div id="more" style="background-color:rgb(255,101,81); width: 91px; ;">  More</div>


     </div>

CodePudding user response：

it because when u display flex all the childs even though they are displayed block, flex will make them be displayed inline so it will take the minimum space instead of 100% width of the parent, so you need to give each child more width to see that the text is in the center of it's div

or if you want to display all the text in a row but center just add justify-content: center and align-items: center, these are for the parent

CodePudding user response：

Solved, I gave a display:inline-block property of all childs and line-height as much as all childs height

.social-links div {
  display: inline-block;
  line-height: 27px;
}

CodePudding user response：

Try to do this

<div  style=display:block;margin-left:auto;margin-right:auto;>
 <div id="facebook" style="background-color: rgb(60,86,156);">Facebook</div>
 <div id="twitter" style="background-color: rgb(29,162,243);">Twitter</div>
 <div id="email" style="background-color: rgb(132,132,132);">Email</div>
 <div id="pinterest" style="background-color:rgb(199,33,39);">Pinterest</div>
 <div id="whatsapp" style="background-color:rgb(78,193,69);">Whatsapp</div>
 <div id="telegram" style="background-color:rgb(0,135,207);">Telegram</div>
 <div id="more" style="background-color:rgb(255,101,81); width: 91px; ;">  More</div>


 </div>