父div中的中心输入

时间：2017-10-06 10:08:06

标签： javascript jquery html css css3

我放弃了，来到这里寻求帮助。

我正在尝试对齐这个div的内部，以便正好在中间：

Image

（红色边框只是这样我可以看到每个项目的布局......）

body {
    margin: 0;
    padding: 16px;
}

@font-face {
	font-family: "Product Sans";
	font-style: normal;
	font-weight: normal;
	src: url("ProductSans-Regular.woff") format("woff");
}

.form {
	background-color: grey;
	background-color: rgba(66, 66, 66, 0.7);
	border: 1px solid transparent;
	border: 1px solid red;
	border-radius: 25px;
	color: #FFFFFF;
	font: 1em "Product Sans";
	left: 50%;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.textInput {
	background-color: transparent;
	border: none;
	border: 1px solid red;
	border-bottom: 2px solid transparent;
	box-sizing: border-box;
	padding: 16px;
	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.textInput:focus {
	border-bottom: 2px solid rgba(255, 138, 128, 0.7);
}

.textInput:invalid {
	box-shadow:0 0 0 transparent;
}
.submit {
	background-color: transparent;
	border: 2px solid rgba(255, 138, 128, 0.7);
	border: 1px solid red;
	box-sizing: border-box;
	padding: 16px;
	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.submit:hover {
	background-color: rgba(255, 138, 128, 0.7);
	border: 2px solid transparent;
}
<!DOCTYPE html>
<html>
	<head>
		<title>Beautiful login - made with <3, PHP, CSS and HTML</title>
		<meta charset="utf-8" />
		<link type="text/css" href="StyleSheet.css" rel="stylesheet" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="form">
			<form action="/index.php" method="post">
				<input type="text" name="userName" class="textInput" title="This area is for your unique username" placeholder="Your username here" required  />
				<br />
				<input type="password" name="passWord" class="textInput" title="This area is for your unique username" placeholder="Your password here" required />
				<br />
				<button type="submit" name="submit" class="submit" title="Click this button if you are sure your information is right" >Submit</button>
			</form>
		</div>
		<script>
			var screenWidth = $(window).width();
			var screenHeight = $(window).height();
			$(".form").css("width", screenWidth / 3);
			$(".form").css("height", screenHeight / 3 + 32);
			$(".textInput").css("width", screenWidth / 4)
			$(".submit").css("width", screenWidth / 4);
			var URL = "https://source.unsplash.com/" + screenWidth + "x" + screenHeight + "/?nature,water";
			$("body").css("background-image", "url(" + URL + ")");
		</script>
	</body>
</html>

正如你所看到的，我设法将大的灰色圆角矩形居中，但同样的方法对内容不起作用。

4 个答案:

答案 0 :(得分：3)

您可以将这三个属性添加到.form类，以实现内容的垂直居中：

display: flex;
flex-direction: column;
justify-content: center;


body {
  margin: 0;
  padding: 16px;
}

@font-face {
  font-family: "Product Sans";
  font-style: normal;
  font-weight: normal;
  src: url("ProductSans-Regular.woff") format("woff");
}

.form {
  background-color: grey;
  background-color: rgba(66, 66, 66, 0.7);
  border: 1px solid transparent;
  border: 1px solid red;
  border-radius: 25px;
  color: #FFFFFF;
  font: 1em "Product Sans";
  left: 50%;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.textInput {
  background-color: transparent;
  border: none;
  border: 1px solid red;
  border-bottom: 2px solid transparent;
  box-sizing: border-box;
  padding: 16px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.textInput:focus {
  border-bottom: 2px solid rgba(255, 138, 128, 0.7);
}

.textInput:invalid {
  box-shadow: 0 0 0 transparent;
}

.submit {
  background-color: transparent;
  border: 2px solid rgba(255, 138, 128, 0.7);
  border: 1px solid red;
  box-sizing: border-box;
  padding: 16px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.submit:hover {
  background-color: rgba(255, 138, 128, 0.7);
  border: 2px solid transparent;
}
<!DOCTYPE html>
<html>

<head>
  <title>Beautiful login - made with
    <3, PHP, CSS and HTML</title>
      <meta charset="utf-8" />
      <link type="text/css" href="StyleSheet.css" rel="stylesheet" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <div class="form">
    <form action="/index.php" method="post">
      <input type="text" name="userName" class="textInput" title="This area is for your unique username" placeholder="Your username here" required />
      <br />
      <input type="password" name="passWord" class="textInput" title="This area is for your unique username" placeholder="Your password here" required />
      <br />
      <button type="submit" name="submit" class="submit" title="Click this button if you are sure your information is right">Submit</button>
    </form>
  </div>
  <script>
    var screenWidth = $(window).width();
    var screenHeight = $(window).height();
    $(".form").css("width", screenWidth / 3);
    $(".form").css("height", screenHeight / 3 + 32);
    $(".textInput").css("width", screenWidth / 4)
    $(".submit").css("width", screenWidth / 4);
    var URL = "https://source.unsplash.com/" + screenWidth + "x" + screenHeight + "/?nature,water";
    $("body").css("background-image", "url(" + URL + ")");
  </script>
</body>

</html>

答案 1 :(得分：2)

如果您希望输入文字内容为中心，则只需使用css text-align:center

即可 
 .textInput {
   text-align:center
 }


body {
    margin: 0;
    padding: 16px;
}

@font-face {
	font-family: "Product Sans";
	font-style: normal;
	font-weight: normal;
	src: url("ProductSans-Regular.woff") format("woff");
}

.form {
	background-color: grey;
	background-color: rgba(66, 66, 66, 0.7);
	border: 1px solid transparent;
	border: 1px solid red;
	border-radius: 25px;
	color: #FFFFFF;
	font: 1em "Product Sans";
	left: 50%;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.textInput {
	background-color: transparent;
	border: none;
	border: 1px solid red;
	border-bottom: 2px solid transparent;
	box-sizing: border-box;
	padding: 16px;
	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    text-align:center;
}

.textInput:focus {
	border-bottom: 2px solid rgba(255, 138, 128, 0.7);
}

.textInput:invalid {
	box-shadow:0 0 0 transparent;
}
.submit {
	background-color: transparent;
	border: 2px solid rgba(255, 138, 128, 0.7);
	border: 1px solid red;
	box-sizing: border-box;
	padding: 16px;
	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.submit:hover {
	background-color: rgba(255, 138, 128, 0.7);
	border: 2px solid transparent;
}
<!DOCTYPE html>
<html>
	<head>
		<title>Beautiful login - made with <3, PHP, CSS and HTML</title>
		<meta charset="utf-8" />
		<link type="text/css" href="StyleSheet.css" rel="stylesheet" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="form">
			<form action="/index.php" method="post">
				<input type="text" name="userName" class="textInput" title="This area is for your unique username" placeholder="Your username here" required  />
				<br />
				<input type="password" name="passWord" class="textInput" title="This area is for your unique username" placeholder="Your password here" required />
				<br />
				<button type="submit" name="submit" class="submit" title="Click this button if you are sure your information is right" >Submit</button>
			</form>
		</div>
		<script>
			var screenWidth = $(window).width();
			var screenHeight = $(window).height();
			$(".form").css("width", screenWidth / 3);
			$(".form").css("height", screenHeight / 3 + 32);
			$(".textInput").css("width", screenWidth / 4)
			$(".submit").css("width", screenWidth / 4);
			var URL = "https://source.unsplash.com/" + screenWidth + "x" + screenHeight + "/?nature,water";
			$("body").css("background-image", "url(" + URL + ")");
		</script>
	</body>
</html>

答案 2 :(得分：0)

嗯，你并没有真正将你的方法应用于内容:)。您可以使它们与中心外部.form div居中的方式完全相同。将此添加到您的CSS应该工作：

form {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

答案 3 :(得分：0)

要使内容垂直和水平居中，请将这些样式添加到表单中：

.form{
display: flex;
flex-direction: column;
align-items: center;
justify-contents: center;
}

将整个表单放在页面中间，没有绝对定位表单并给出顶部：50％，将其包装在高度为100vh的容器中，例如：

.container{
height: 100vh;
display: flex;
align-items: center;
}
相关问题
最新问题