将div居中于div中
[英]Center a div inside a div
问题描述
I have a problem in my HTML code I want to center something that is inside a division that is inside a division. 
我的HTML代码有问题，我想将某部分内部的内容居中。 I am not really sure how. 我不确定如何。 This is my code: HTML CODE(ACTUALLY A PHP FILE): 这是我的代码：HTML代码（实际上是一个PHP文件）：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mateo.css">
<title>Mateo's About Page</title>
</head>
<body>
<div class="items">
<div id="basicInfo">
<img src="images/question.png">
</div>
<div id="langs">
<img src="images/code.jpg">
</div>
</div>
<div id="textSpace">
</div>
<?php
$username = $_POST['username'];
$password = $_POST['password'];
$accounts = mysqli_connect("localhost","root","BKpH7e6k","accounts") or die(mysqli_error());
mysqli_select_db($accounts, "accounts");
$sql = "
SELECT * from users WHERE Username LIKE '{$username}' AND Password LIKE '{$password}' LIMIT 1
";
$results = $accounts->query($sql);
if(!$results->num_rows == 1){
header("Location: http://localhost/aboutPage/login.php");
} else {
echo "<p>Logged in successfully!</p>";
}
?>
</body>
</html>
And this is my css file: 这是我的css文件：
body {
background: url("images/background.jpg") repeat;
font-size: 100%;
font-family: Arial;
}
.items {
display: block;
background-color: gray;
max-width: 50%;
max-height: 100%;
border-radius: 20px;
border: 2px solid black;
opacity: .8;
margin-left: auto;
margin-right: auto;
}
#basicInfo{
background-color: orange;
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#basicInfo:hover{
background-color: green;
}
#basicInfo img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs{
background-color: orange;
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#langs img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs:hover{
background-color: green;
}
And this is a picture or the problem. 这是一个图片或问题。
So I want the orange boxes to float next to each other in the center of the div they are in. Any help is appriciated :) Thanks1 因此，我希望橙色框在它们所在的div的中心中彼此相邻漂浮。可以提供任何帮助：） Thanks1
3 个解决方案
解决方案1
0 已采纳 2015-01-14 19:48:40
Since you're using display: inline-block on #basicInfo and #langs just call text-align: center on the parent .items : 由于您在#basicInfo和#langs上使用display: inline-block ， #langs仅在父.items上调用text-align: center ：
.items {
display: block;
background-color: gray;
max-width: 50%;
max-height: 100%;
border-radius: 20px;
border: 2px solid black;
opacity: .8;
margin-left: auto;
margin-right: auto;
text-align: center; //add
}
解决方案2
0 2015-01-14 19:49:13
add text-align: center to your .items class ( http://jsfiddle.net/cz19q7a9/ ) 在您的.items类中添加text-align：center（ http://jsfiddle.net/cz19q7a9/ ）
.items
{
text-align: center;
}
解决方案3
0 2015-01-14 19:53:03
Just do margin: auto on the inside div , it will center according to it's parent. 只需做一下margin: auto在div内部margin: auto设置，它将根据其父级居中。 Here is an example . 这是一个例子 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.