Выровнять текст по центру в css на мобильном устройстве с помощью экрана мультимедиа

Question

Я пытаюсь выровнять текст по центру на мобильном устройстве, но это не работает. вот код

@media screen and (max-width: 100px) {
  .info1{
    
    width: 100px;
  height: 100px;
  margin: 0 auto;
   
  }
}  

 <div class="info1">
      <p style=" display:inline-block; "> Contact : +97252387
 ,  </p>             
   <p style=" display:inline-block; ">Dizengoff square 85 Tel Aviv</p>
  </div>

text-align тоже не работает

Answer 1

Ваше центрирование не работает, потому что ваш медиа-запрос

@media screen and (max-width: 100px) {...

, поэтому он, вероятно, работает ниже 100 пикселей. Но я предполагаю, что вы имели в виду 1000px?

EDIT : вот 2 рабочих примера:

@media screen and (max-width: 1000px) {
  .info1{
    
    width: 100px;
  height: 100px;
  margin: 0 auto;
   
  }
}

<div class="info1">
      <p style=" display:inline-block; "> Contact : +97252387
 ,  </p>             
   <p style=" display:inline-block; ">Dizengoff square 85 Tel Aviv</p>
  </div>

@media screen and (max-width: 1000px) {
  .info1 {
  display:flex;
  flex-direction: column;
  align-items: center;
   
  }
  .info1 > p {
    width: 100px;
  }
}

<div class="info1">
      <p style=" display:inline-block; "> Contact : +97252387
 ,  </p>             
   <p style=" display:inline-block; ">Dizengoff square 85 Tel Aviv</p>
  </div>

для последнего примера обратите внимание, что вы можете удалить

.info1 > p {
    width: 100px;
}

, если вам не нужна фиксированная ширина.