Bootstrap oder css: Text zentrieren

Ich habe einige Wörter, die links und rechts von einem "|" ausgerichtet sind. In jeder Zeile sollten die Rohre zentriert sein. Das ist, was ich will (jede Linie zentriert ist):Bootstrap oder css: Text zentrieren

     small text | little more text 
       longer text left | a word

Wenn ich eine zentrierte div um jede Zeile verwende ich dies (was ich nicht will):

    small text | little more text 
        longer text left | a word

Wie kann ich erreichen, Das?

Dies wäre eine Lösung sein, wenn ich alte Schultische https://jsfiddle.net/wL5sjkn4/1/ verwendet:

<table align="center"> 
    <tr> 
     <td width="*" align="right">Links</td> 
     <td width="20px" align="center">|</td> 
     <td width="*" align="left">Rechts Lorem Lorem</td> 
    </tr> 
    <tr> 
     <td width="*" align="right">Links Lorem Lorem</td> 
     <td width="20px" align="center">|</td> 
     <td width="*" align="left">Rechts</td> 
    </tr> 
</table>

Quelle

2017-02-04 Stefan Meyer

<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container-fluid"> 
 
    <h1>Hello World!</h1> 
 
    <p>Resize the browser window to see the effect.</p> 
 
    <div class="row"> 
 
    <div class="col-sm-6 text-right" style="background-color:lavender;">Lorem</div> 
 
    <div class="col-sm-6" style="background-color:lavenderblush;">Lorem Lorem Lorem Lorem</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-6 text-right" style="background-color:lavender;">Lorem Lorem Lorem Lorem</div> 
 
    <div class="col-sm-6" style="background-color:lavenderblush;">Lorem</div> 
 
    </div> 
 
</div> 
 
    
 
</body> 
 
</html>

Diese Lösung ist, glaube ich? Sehen Sie im Vollbild, ändern Sie es entsprechend Ihrer Anforderung.

Quelle

2017-02-04 11:46:28 Mohammed

Nein, das ist NICHT was ich meinte, aber das war einer meiner Versuche. Es ist wichtig zu sehen, dass ich "3 Spalten" pro Zeile haben möchte - das mittlere enthält nur das Pipe-Symbol (|). Und das muss in jeder Zeile zentriert werden –

Ok, ich habe es. Lass mich es bearbeiten. @StefanMeyer – Mohammed

Ich aktualisierte m Frage mit einer Tabelle "Lösung" - aber ich würde das gerne mit Bootstrap tun –

Text Alignment richtet Text zwar aus, weiß aber nicht den Kontext davon, weiß nicht, dass er sich nach einem bestimmten Zeichen ausrichten soll. Bitte sehen Sie diese Geige: https://jsfiddle.net/dxL6s4tn/ für Beispiele und mögliche Lösungen.

Dies ist ein Teil der Geige:

html

<!-- Preformatted monotype font --> 
<section class="pre-mono"> 
     small text | little more text 
longer text left | a word 
</section>

css

.pre-mono { 
    font-family: "Courier New", Courier, monospace; 
    white-space: pre; 
}

Mohammeds Antwort wird auch funktionieren, aber erfordert, dass Sie Sie HTML-Struktur zu ändern, dies ist eine bessere Lösung, wenn Sie mit einem tatsächlichen Markup statt mit reinem Text arbeiten.

Quelle

2017-02-04 12:02:54

Nun, in der Geige sehe ich nicht den Teil, den ich gefragt habe. Ich habe meine Frage bearbeitet. –

Das letzte Beispiel sollte funktionieren (Monotype font/pre) –

Bootstrap oder css: Text zentrieren

Antwort

Verwandte Themen