代码之家 › 专栏 › 技术社区 › tom clack

如何在一列上对齐文本?

twitter-bootstrap css html

tom clack · 技术社区 · 7 年前

.col-md-4 {
  text-align:center
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

<div class="container">
    <div class="row">
        <div class="col-md-4">

            <p>
                Test
            </p>
            <p>
                Testttttttttttttt
            </p>


        </div>
    </div>

</div>

https://jsfiddle.net/jze8gqb1/1838/

我想在一列中对齐文本项。我使用显示:内联块,但不工作。我该怎么修?谢谢您。

产量

          Test
    Testttttttttttttt

期望输出

        Test
        Testttttttttttttt

3 回复 | 直到 6 年前

Arkellys 6 年前

你可以用一个 p 标签和 white-space: pre-line :

.col-md-4 {
  text-align:center
}

p {
  white-space: pre-line;
  text-align: left;
  display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <p>
        Test
        Testttttttttttttt
      </p>
    </div>
  </div>
</div>

您可以找到有关 white-space 财产 here .

Jesse Castro 7 年前

将此添加到您的班级 class=“左文本”

JozeV 7 年前

试试这个

 <div class="container">
      <div class="row">
        <div class="col-md-4">
            <p class="text-left">
                Test
                <br>
                Testttttttttttttt
            </p>
        </div>
      </div>
    </div>

没有css,只需将class=“text-left”添加到所需的p元素

推荐文章