Wie kann ich Text in meiner Bootstrap-Webseite zentrieren?

Ich schreibe eine Webseite und so weit sieht es so aus: Wie kann ich Text in meiner Bootstrap-Webseite zentrieren?

Ich möchte diesen Text in der Mitte der Seite haben. Der Container mit Text sollte in der Mitte der Seite sein, aber der Text sollte nicht zentriert sein (er sollte eher nach links ausgerichtet sein). Was mache ich falsch?

Mein HTML-Code ist:

<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <a href="http://www.company.com"> 
        <div class="text-center logo"> 
          <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png"> 
         </div> 
       </a> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-12 info general"> 
       <h3>test sth</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
      </div> 
     </div> 


     <div class="row" id="summary"> 
      <div class="col-lg-12 info"> 
       <h4>sample header</h4> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
      </div> 
     </div> 
</div> 
</body>

und die CSS - neben Bootstrap - wie folgt:

<style> 
    body { 
     padding-top: 70px; 
     font-family: "Helvetica Neue","Open Sans",Arial,sans-serif; 
     background-color: white; 
    } 

    .logo img { 
     width: 100px; 
    } 

    .info { 
     width:100%; 
     max-width: 700px; 
     margin:0 auto; 

    } 

    .general { 
     padding: 24px 20px; 
    } 
</style>

- ===== edit:

nur ein Follow-up , so weit sieht diese Webseite so aus:

|      [LOGO]      |  
| text text text text text te     | 
| text text text text tex      | 
| text text text text text text     | 
| text text text text       |

und das ist, was ich erreichen will:

|      [LOGO]      |  
|   text text text text text te   | 
|   text text text text tex    | 
|   text text text text text text  | 
|   text text text text     |

Quelle

2016-06-05 user3766930

Sie möchten also, dass der Text vom Container getrennt ist? –

Welchen Inhalt Sie auch immer in der Mitte haben möchten, verwenden Sie text-align: center style auf dem div. und für diejenigen, die Sie in links oder rechts benötigen, verwenden Sie geeignete CSS-Stil auf ihrer jeweiligen div. –

allgemeine und Zusammenfassung im gleichen div Stoßen, geben, dass eine Breite div und Zentrieren von

margin: 0 auto;

Da Sie mit‘ Wenn Sie Bootstrap verwenden, können Sie auch das Grid verwenden und dem übergeordneten div z. B. die Klassen col-lg-8 und col-lg-offset-2 geben.

auch etwas offtopic, aber wenn Sie nur werde diese divs geben die col-lg-12 Klasse, die Sie insgesamt vermeiden können, dass da divs Display eingestellt werden: Block standardmäßig aktiviert und somit 100% Breite besetzen bereits.

Quelle

2016-06-05 16:04:45 Hissvard

'col-lg-8 und col-lg-offset-2' haben es geschafft, danke! – user3766930

Denken Sie jedoch daran, dass es mehrere Möglichkeiten gibt, es zu tun, also nutzen Sie Ihre Chance und experimentieren Sie. Wenn Sie eine Frage stellen, die eine Demo Ihres Codes auf JSFiddle bringt, hilft Ihnen und denen, die Ihre Frage beantworten, dieses Mal habe ich es für Sie getan: https://jsfiddle.net/opqdsj9j/3/ – Hissvard

Wie kann ich Text in meiner Bootstrap-Webseite zentrieren?

Antwort

Verwandte Themen