Question

我只是想在改变宽度的同时居中

这是我的html代码

<section class="sss">
        <div class="s-footer">
            <h3>Like what you see?</h3>
            <p>Hire me</p>
        </div>

        <div class="nav-footer">
            
            <nav class="list">
                <ul>
                    <li><a href="#">My work</a></li>
                    <li><a href="#">My skills</a></li>
                    <li><a href="#">Hire me</a></li>
                </ul>
            </nav>

            <a href="index.html" class="logo-2">Alkhazriji</a>
        </div>
    </section>

我在媒体查询中的 css 代码

.s-footer p
    {
        display: block;
        width: 50%;
        text-align: center;
    }

在媒体查询之前

.s-footer p
{
    background: #852EF8;
    border-radius: 50px;
    margin: 0 5em;
    font-size: 1.5em;
    width: 33.33;
    font-weight: bold;
    color: #FF57E9;
    cursor: pointer;
    display: block;
    position: relative;
}

.sss
{
    padding-top: 0;
    margin-top: 0;
    display: block;
    padding: 0;
}

我尝试了通常居中的所有内容，但是当我更改宽度时，它会转到左侧，我尝试了文本对齐、位置、网格、显示，但没有任何效果。（我是编码新手，所以我的问题可能看起来很愚蠢）

Answer 1

您在寻找保证金吗？

.s-footer p
    {
       display: block;
       width: 50%;
       text-align: center;
       margin: 0 auto;
   }

'margin: 0 auto' 将使您的 div 块居中，您可以随意将宽度更改为您想要的任何大小。

Answer 2

您的段落未居中的原因是段落的宽度为 50%。使段落的宽度 100% 修复它。下面是一个例子：

.s-footer p{
  display: block;
  width: 100%;/*This makes all the difference*/
  text-align: center;
}

<section class="sss">
    <div class="s-footer">
        <h3>Like what you see?</h3>
        <p>Hire me</p>
    </div>

    <div class="nav-footer">

        <nav class="list">
            <ul>
                <li><a href="#">My work</a></li>
                <li><a href="#">My skills</a></li>
                <li><a href="#">Hire me</a></li>
            </ul>
        </nav>

        <a href="index.html" class="logo-2">Alkhazriji</a>
    </div>
</section>

我想将我的段落居中，但它不起作用

2 个答案: