Bootstrap 4 Wie zentriere ich eine Reihe?

Nun das erste Problem ist <p> und <h1> erscheinen in der gleichen Zeile und egal was ich tun sie können nicht zentriert werden.Bootstrap 4 Wie zentriere ich eine Reihe?

html.

<div class="container"> 

      <div class="row" id="appSummary"> 

       <h1>Why This App Is Awesome</h1> 
       <p class="lead">Summary, once again, of your app's awesomeness</p> 

      </div> 
</div>

css

#appSummary{ 
    text-align:center; 
}

Quelle

2017-11-13 Samrat Luitel

Sie können auch versuchen, hinzuzufügen: class = "text-center" – dpetrini

@dpretrini i auch h1 gesagt und p sind in der gleichen Zeile. und ich habe versucht, dass bereits –

youve auch eine div verpasst, die die Spalten definiert, die unnötige Fehler verursachen könnten – mast3rd3mon

Da Sie mit Bootstrap 4, die das Flex-Modell verwendet, Ihre CSS-Regel ändern:

#appSummary{ 
    justify-content:center; 
}

Bootply example

Quelle

2017-11-13 16:51:26 j08691

Downvoter Care Kommentar? Ich liebe es, wenn jemand eine richtige Lösung downwards a) ohne sich selbst zu erklären und b) wenn sie eindeutig falsch sind – j08691

Ich weiß nicht, wer downvoted. Gut, danke, dass es funktioniert. Kannst du mir ein bisschen Flex-Modell erklären? Ich denke, dass es das alles Problem ist, dass das meiste der Sache, die ich vom Internet folge, nicht funktioniert. und auch h1 und p sind nicht in der gleichen Zeile –

@ j08691 wer downvoted ist nicht falsch, wie ich in meinem Kommentar zu der Frage festgestellt, fehlt das Div mit einer Spaltendefinition wird unnötige Fehler verursachen – mast3rd3mon

Sie können Verwenden Sie margin: auto zum Zentrieren Artikel, anstatt text-align: center warum?

margin: 0 auto; beeinflusst den Behälter direkt, und wenn der Behälter ist auf Blockebene (Anzeige Block).

text-align: center; centre wirkt sich auf Text-, Inline- und Inline-Block-Ebene Kinder eines Containers aus - nicht der Container selbst.

reference

i erstellt Beispiel in jsfiddle

Quelle

2017-11-13 16:55:48 Vico

Der einfache Weg: in Klasse justify-content-center an die Reihe.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="row justify-content-center" id="appSummary"> 
 

 
    <h1>Why This App Is Awesome</h1> 
 
    <p class="lead">Summary, once again, of your app's awesomeness</p> 
 

 
    </div> 
 
</div>

Quelle

2017-11-13 16:59:50 Klooven

Verwenden d-flex flex-Säule: mehr here

<div class="container"> 
     <div class="d-flex flex-column" id="appSummary"> 
      <h1>Why This App Is Awesome</h1> 
      <p class="lead">Summary, once again, of your app's awesomeness</p> 

     </div> 
</div>

Quelle

2017-11-13 17:03:39 voscausa

Bootstrap 4 Wie zentriere ich eine Reihe?

Antwort

Verwandte Themen