Question

我正在尝试将内容在div类“行”中水平居中。我尝试使用justify-content-center和其他变体。

<div class="container">

    <div class="row">
        <div class="col-md-4 portfolio-item">
            <h3>
                <a href="#">Text</a>
            </h3>
            <p>
                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
            </p>
            <p>
                Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
            </p>
        </div>
        <div class="col-md-4 portfolio-item">
            <a href="#" target="_blank">
                <img class="img-responsive" srcset="icon.png 1x, iconRetina.png 2x">                
            </a>
            <a href="#" target="_blank">
                <img class="img-responsive" srcset="downloadOnAppStore.png 1x, downloadOnAppStoreRetina.png 2x">                
            </a>
        </div>
    </div>

</div>

我可以看到答案如何使内容居中，但这并不是我的意思。无论页面有多宽，我都希望内容大小的宽度与页面的中心对齐。

现在如何：

我想将其转换为如下形式：

问题似乎是列占据了行宽的50％。

Answer 1

所以看来justify-content-center是最好的选择：

.portfolio-item {
background-color: blue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<body>
 <div class="container">

        <div class="row justify-content-center">
            <div class="col-md-4 portfolio-item">
                <h3>
                    <a href="#">Text</a>
                </h3>
                <p>
                	It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
                </p>
                <p>
                	Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
                </p>
            </div>
            <div class="col-md-4 portfolio-item">
                <a href="#" target="_blank">
                    <img class="img-responsive" srcset="icon.png 1x, iconRetina.png 2x">                
                </a>
                <a href="#" target="_blank">
                    <img class="img-responsive" srcset="downloadOnAppStore.png 1x, downloadOnAppStoreRetina.png 2x">                
                </a>
            </div>
        </div>
    </div>
    </body>

Answer 2

引导程序共有12个网格。你有使用8格。使用此类（offset-md-2），它将从左侧推动2个网格。那么您的内容将居中

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<body>
 <div class="container">

        <div class="row">
            <div class="col-md-4 portfolio-item offset-md-2">
                <h3>
                    <a href="#">Text</a>
                </h3>
                <p>
                	It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
                </p>
                <p>
                	Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
                </p>
            </div>
            <div class="col-md-4 portfolio-item">
                <h3>
                    <a href="#">Text</a>
                </h3>
                <p>
                	It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
                </p>
                <p>
                	Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
                </p>
            </div>
        </div>
    </div>
    </body>

Answer 3

我使用您的代码在下面运行代码。 “ justify-content-center”对我有效。另外，我在“ col”中添加了“ text-center”，以防万一您希望它们也居中-但如果希望它们正确对齐，则可以删除这两个。

我没有更新引导程序时遇到了这个问题。也许那也是你的问题。

<div class="container">

<div class="row justify-content-center">
    <div class="col-md-4 portfolio-item text-center">
        <h3>
            <a href="#">Text</a>
        </h3>
        <p>
            It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
        </p>
        <p>
            Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
        </p>
    </div>
    <div class="col-md-4 portfolio-item text-center">
        <a href="#" target="_blank">
            <img class="img-responsive" srcset="icon.png 1x, iconRetina.png 2x">                
        </a>
        <a href="#" target="_blank">
            <img class="img-responsive" srcset="downloadOnAppStore.png 1x, downloadOnAppStoreRetina.png 2x">                
        </a>
    </div>
</div>

Answer 4

尝试一下。您必须给justify-content-center。

.bg-color{
  background:#eee;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row justify-content-center bg-color">
    <div class="col-md-4 portfolio-item">
      <h3>
        <a href="#">Text</a>
      </h3>
      <p>
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
      </p>
      <p>
        Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
      </p>
    </div> 
    <div class="col-md-4 portfolio-item">
      <h3>
        <a href="#">Text</a>
      </h3>
      <p>
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
      </p>
      <p>
        Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
      </p>
    </div>        
  </div>
</div>

Answer 5

这里有很多答案，但是最直接的方法是利用Boostrap的justify-content-center。

或者，一种纯CSS方法是利用justify-content CSS属性，并将其设置为center。这是因为Bootstrap的grid system基于Flexbox。您可以使用row类将'justify-content'属性分配给元素。这基本上类似于justify-content-center类。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

    <div class="row" style="justify-content:center">
        <div class="col-md-4 portfolio-item">
            <h3>
                <a href="#">Text</a>
            </h3>
            <p>
                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
            </p>
            <p>
                Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
            </p>
        </div>
        <div class="col-md-4 portfolio-item">
            <a href="#" target="_blank">
                <img class="img-responsive" srcset="icon.png 1x, iconRetina.png 2x">                
            </a>
            <a href="#" target="_blank">
                <img class="img-responsive" srcset="downloadOnAppStore.png 1x, downloadOnAppStoreRetina.png 2x">                
            </a>
        </div>
    </div>

</div>

引导程序行内容居中

5 个答案: