ブートストラップまたはCSS：センターテキストの整列

"|"の左右に整列した単語がいくつかあります。各ラインでパイプをセンタリングする必要があります。これは、（各行は中央に）私が欲しいものです：ブートストラップまたはCSS：センターテキストの整列

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

私はそれぞれの行を中心にdiv要素を使用している場合、私は（私はしたくないものを）これを取得：

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

どのように達成することができますそれ？私はhttps://jsfiddle.net/wL5sjkn4/1/古い学校のテーブルを使用する場合

これが解決策になる：

<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>

出典

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>

これが解決策ですが、私はと思いますか？フルスクリーンで表示し、必要に応じて変更してください。

出典

2017-02-04 11:46:28 Mohammed

いいえ、それは私が意味するものではありませんが、これは私の試みの1つです。 1行に3列が必要ですが、中央にはパイプ記号（|）のみが含まれています。そして、これは各行の中心に置かなければなりません –

わかりました。私はそれを編集させてください。 @StefanMeyer – Mohammed

m質問をテーブル「解決策」で更新しましたが、ブートストラップを使用して質問します。 –

テキストの配置はテキストを整列させますが、テキストのコンテキストを認識せず、特定の文字に従って整列する必要があるかどうかはわかりません。例と可能な解決策については、このフィドル：https://jsfiddle.net/dxL6s4tn/をご覧ください。

これはフィドルの一部です：

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; 
}

モハメッドの答えは同様に動作しますが、あなたのHTML構造を変更する必要があり、このうあなたがプレーンテキストではなく実際のマークアップを扱っているなら、より良い解決策です。

出典

2017-02-04 12:02:54

フィドルでは、私が求めた部分は表示されません。私は私の質問を編集しました。 –

最後の例は機能するはずです（monotype font/pre） –

ブートストラップまたはCSS：センターテキストの整列

答えて

関連する問題