无法将<div>居中对齐，并且无法正确管理不透明度

阿比舍克·迪瓦卡（Abhishek Diwakar）

请看下面的图片和代码。我正在制作简单的注册html表单。我试图保持在屏幕中间。我也只是想使div背景不透明度为50％，但是以某种方式，文本输入和按钮的不透明度也更改为50％。请帮助我找到解决方案。

这是一个简单的注册表单的代码。

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up</title>
</head>
<body background="back.jpg">
    <form>
        <div style="background-color: rgb(255,255,255); opacity: 0.5; display: inline-table; padding: 20px; border-radius: 25px;">
            <input type="email" name="email" placeholder="Enter your E-Mail here" style="border-radius: 25px; padding: 5px; outline-style: none;"><br><br>
            <input type="password" name="password" placeholder="Enter Password" style="border-radius: 25px; padding: 5px; outline-style: none;"><br>
            <p style="color: rgb(58,58,58);"><input type="checkbox" name="tnc"> Accept T&C</p>
            <input type="submit" name="submit" value="Sign Up" onclick="submit" style="border-radius: 25px; padding: 5px; width: 150px; outline-style: none;">
        </div>  
    </form>
</body>
</html>

参见上面代码的输出

请深入解释或回答。提前致谢

苏米特·库马尔

如果您要将其不透明度仅设置为50％<div style="background-color: rgb(255,255,255,.5); opacity: 0.5; display: inline-table; padding: 20px; border-radius: 25px;">，则只需对div使用此颜色代码，然后就不必对div使用不透明度。

首先给您的表单一些宽度，form{width:600px;margin:auto; display:block; }它将使您的表单居中。从顶部到底部给定边距，form{margin:150px auto;}这样就给样式，所以从顶部到底部也给定边距。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。