时间戳

首页 > 解决方案 > 如何在页面上对齐和居中输入

css - 如何在页面上对齐和居中输入

问题描述

我只是老实说不知道该怎么做，我尝试了浮动和文本对齐，但仍然没有

这是我的代码

代码enter code here https://codepen.io/Gsimelus92/pen/QVXPPz

我想像这样对齐它https://codepen.io/freeCodeCamp/full/VPaoNP

标签： css

解决方案

尝试从我制作的这段代码中学习。我制作了一个 100% 宽度的 div，在该 div 里面有两个项目。

HTML：

<section>
    <div class="container">
        <div class="item__container">
            <div class="item__1 grid__mar">
                <p>item 1</p>
            </div>
            <div class="item__2 grid__mar">
                <form id="survey-form">
                    <input type="text" name="Your name" placeholder="Enter your name" value="input">
                </form>
            </div>
        </div>
    </div>
</section>

SCSS：

.container {
    margin: 0 auto;
    width: 1100px;
    display: block;
    background-color: bisque;
}

.item__container {
    margin: 0 auto;
    width: 100%;
    letter-spacing: 0;
    font-size: 0;
    display: block;

    .item__1 {
        margin: 0 auto;
        width: 48%;
        display: inline-block;
        background-color: indianred;
        margin: 1% 0 1% 1%;
        vertical-align: top;

        p {
            margin: 0 5px;
            color: #000;
            font-size: 30px;
            text-align: right;
        }
    }

    .item__2 {
        margin: 0 auto;
        width: 49%;
        display: inline-block;
        //background-color: blue;
        margin: 1% 0 1% 1%;

        input {
            border-radius: 5px;
            vertical-align: top;
            width: 100%;
            height: 30px;
        }
    }
}

推荐阅读