个人中心
gpt4 book ai didi

html - 居中引导行内容

转载 作者：太空宇宙 更新时间：2023-11-03 21:03:03 25 4
gpt4 key购买 nike

我试图将 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>

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

现在怎么样了: enter image description here

我想把它改成这样: enter image description here

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

最佳答案

所以看来 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>

关于html - 居中引导行内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57614608/

25 4 0
文章推荐： c# - Lerp 颜色基于 2 个对象之间的距离
文章推荐： c# - 如何在基于 ASP.NET 的服务器中查询 SingleResult 对象？
文章推荐： c# - 在鼠标位置实例化对象
文章推荐： python - Tensorflow 使用上一次迭代的值计算指标的 update_op
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com