Kątowe Centrum wyrównania układu materiału nie ma wpływu na tekst w małym trybie.

Oczekuję, że ten kod wyśrodkuje zawartość zarówno w pionie, jak iw poziomie. Robi to, ale gdy tylko zmniejszę okno (rozmiar urządzenia mobilnego), wyrównanie tekstu (h1 i p) zmieni się w lewo.Kątowe Centrum wyrównania układu materiału nie ma wpływu na tekst w małym trybie.

Czy brakuje mi czegoś bardzo prostego? Mogę powiedzieć, text-center to działa, ale nie chcę samodzielnie dodawać stylów CSS.

angular.module('app', ['ngMdIcons', 'ngMaterial']);

<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css"> 
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
     <script src="https://login.persona.org/include.js"></script> 
 
     <script src="https://code.angularjs.org/1.4.0/angular.js"></script> 
 
     <script src="https://code.angularjs.org/1.4.0/angular-route.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.min.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-aria.min.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script> 
 
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.5.0/angular-material-icons.min.js"></script> 
 
    </head> 
 
    <body layout="column" ng-app="app"> 
 
     <div layout="row" flex layout-align="center center"> 
 
     <div layout="column" layout-align="center"> 
 
      <h1>Welcome to Dreamland!</h1> 
 
      <md-button class="md-hue-2 md-raised md-primary" > 
 
       <h1 class="md-display-1">Login</h1> 
 
      </md-button> 
 
      <p class="md-caption">This web site uses your membership with the given email address.</p> 
 
     </div> 
 
     </div> 
 
    </body> 
 
</html>

Źródło

2015-06-19 nurp

mam ten sam problem. Czy kiedykolwiek znalazłeś rozwiązanie? –

Nie, nie mogłem. Użyłem style = "text-align: center". Myślę, że materiał kątowy decyduje, czy wyśrodkować tekst, czy nie. Jeśli tekst jest długi, wyrównuje do lewej. A wyśrodkowany, jeśli krótki. Możesz to zobaczyć sam z fałszywymi treściami. – nurp

Dla mnie to działa jak SI powinien w najnowszej wersji Chrome. Powiedziałbym, że jest to problem ze zgodnością przeglądarki. Angular Material zawiera sporo błędów, ponieważ wciąż jest bardzo nowy.

Dodałem kanciasty materiał do mojej witryny nie tak dawno temu i użyłem przyzwoitej ilości css (niektóre błędy, niektóre nie).

Oczywiście spróbuj użyć natywnych rzeczy, jeśli możesz, ale mały hack css powinien być w porządku, dopóki nie zostanie naprawiony. Daj mi znać, jeśli problem nadal występuje!

Źródło

2015-06-19 22:33:17

gdy samo stało się dla mnie w porównaniu z na przykład layout description

Okazuje się, używałem „flex” element jako dzieci. To przerywa wyrównanie środka. Usunąć to.

Źródło

2016-01-12 14:31:08 pseudozach

Spróbuj

<div layout="column" layout-align="center center"> 
    <h1>Welcome to Dreamland!</h1> 
    <md-button class="md-hue-2 md-raised md-primary btn"> 
     <h1 class="md-display-1">Login</h1> 
    </md-button> 
    <p class="md-caption">This web site uses your membership with the given email address.</p> 
</div>

CSS:

.btn{ 
    width: 350px; 
}

Źródło

2016-09-20 13:47:07 dev

Kątowe Centrum wyrównania układu materiału nie ma wpływu na tekst w małym trybie.

Odpowiedz

Powiązane problemy