居中引导行内容答案

【问题标题】：Centering Bootstrap row content居中引导行内容
【发布时间】：2019-12-28 02:08:29
【问题描述】：

我正在尝试将 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%。

【问题讨论】：

那个好像没有效果

标签： html css bootstrap-4

【解决方案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>

【讨论】：

请在我的问题中查看我的编辑。我可能会用图像对其进行更新以使其可视化。
@ChewieTheChorkie 立即查看
这适用于您的引导程序版本。看起来它似乎是我拥有的引导程序版本。

【解决方案2】：

我使用您的代码得到了下面的代码。 “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>

【讨论】：

【解决方案3】：

bootstrap 共有 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>

【讨论】：

看看我已经上传图片了
对内容居中没有影响，就像我发布的图片一样。

【解决方案4】：

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

另外，纯 CSS 方法是利用 justify-content CSS 属性，并将其设置为 center。这是因为 Bootstrap 的 grid system 是基于 Flexbox 的。您可以将“justify-content”属性分配给具有row 类的元素。这与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】：

试试这个。你必须给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>

【讨论】：

你能解释一下你想要什么..？因为中心的东西工作正常。
请在我的问题中查看我的编辑。我可能会用图像对其进行更新以使其可视化。
仍然将两列都向左对齐
我还想要两列
我知道，但我只是在向您解释它是居中而不是左对齐。我认为你做错了什么。