css 在html中的列中使用时，无法将元素居中

vvppvyoh 于 2022-12-01 发布在其他

关注(0)|答案(5)|浏览(162)

<div class="row">
        <div class="col-lg-3 " style="border: groove;">
            <p class="circle col-xs-1 center-block">01</p>
            <h3>trending courses</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
        </div>
        <div class="col-lg-1"></div>
        <div class="col-lg-3" style="border: groove;">
            <p class="circle text-center">02</p>
            <h3>books&library</h3>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit nostrum voluptates tempore, pariatur nobis
                tempora repellendus deserunt suscipit, sed ex nihil eum impedit maiores quia modi qui aut velit
                veritatis quam deleniti? Quasi dolor, asperiores ut cumque laboriosam accusamus eveniet esse. Officiis
                quidem perferendis qui.</p>
        </div>
        <div class="col-lg-1">

        </div>
        <div class="col-lg-3" style="border: groove;">
            <p class="circle">03</p>
            <h3>certified teachers</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
        </div>
    </div>

1.已使用bs-5，引导包.最小. css
1.这是此代码x1c 0d1x的以下输出
3.这是css的代码。

.circle {
            border-radius: 50%;
            width: 60px;
            height: 60px;
            padding: 10px;
            background: purple;
            border: 3px solid #000;
            display: flex;
            
            color: #fff;
            text-align: center;
            font: 28px arial, sans-serif;
            
        }

1.我尝试了各种伸缩方式，直到我更改边距后才生效
请帮助我，为什么这是行不通的

css

来源：https://stackoverflow.com/questions/74632012/cannot-center-element-when-used-in-columns-in-html

5条答案

按热度按时间

qhhrdooz1#

.circle元素上的text: center无法工作，因为它只会使元素内的文本居中，而不会使元素本身居中。如果要使圆居中，则必须将元素的边距设置为自动
。
或者，如果你想使用flexbox来实现它，那么你必须用一个div来 Package 你的p元素，这个div有display: flex和justify-content: center样式。

赞(0）回复(0）举报 2022-12-01

vbopmzt12#

使用它使所有元素居中：

<div class="col-lg-3 d-flex flex-column align-items-center justify-content-center"></div>

赞(0）回复(0）举报 2022-12-01

0kjbasz63#

以下是仅适用于Flexbox的解决方案：
第一个
如果您使用justify-content: center;的弹性方块环绕每个圆，则弹性方块中的任何项目都会水平置中。

赞(0）回复(0）举报 2022-12-01

xhv8bpkk4#

尝试在css中使用margin:auto或在引导程序中使用m-auto
使用CSS

.circle {
        margin:auto
    }

使用BootStrap将类名添加到div m-auto

<p class="circle text-center m-auto">02</p>

赞(0）回复(0）举报 2022-12-01

z5btuh9x5#

使用Flex
将名为dop的类添加到父圆，将chi添加到子圆

<div className="col-lg-3 dop" style={{ border: "groove" }}>
        <p className="circle text-center chi">02</p>

CSS：

.dop {
  display: flex;
  flex-direction: column;
}
.chi {
  align-self: center;
}

试试这个

赞(0）回复(0）举报 2022-12-01

我来回答

css 在html中的列中使用时，无法将元素居中

5条答案

相关问题

热门标签

最新问答