Question

我有一些单词左右对齐的单词“|”。在每一行中，管道应居中。这就是我想要的（每条线都居中）：

                     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>

Answer 1

＆＃13;

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

＆＃13;

这是解决方案，我想？全屏查看，根据您的要求进行更改。

Answer 2

文本对齐对齐文本但不知道它的上下文，不知道它应该根据某个字符对齐。请参阅这个小提琴：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;
}

Mohammed的答案也会起作用，但要求你改变你的HTML结构，如果你处理的是实际的标记而不是纯文本，这是一个更好的解决方案。

Bootstrap或css：居中对齐文本

2 个答案: