Question 59511 in Telegram API Question posted in
A comprehensive official documentation can be found here.

Text-align:center property doesn't work how can ı fix it – Telegram API

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 class="social-links">
    <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>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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;
}


  2. 0

    Try to do this

    <div class="social-links" 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>
    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search