將div居中於div中
[英]Center a div inside a div
問題描述
我的HTML代碼有問題，我想將某部分內部的內容居中。 我不確定如何。 這是我的代碼：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>
這是我的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;
}
這是一個圖片或問題。
因此，我希望橙色框在它們所在的div的中心中彼此相鄰漂浮。可以提供任何幫助：） Thanks1
3 個解決方案
解決方案1
0 已采納 2015-01-14 19:48:40
由於您在#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
在您的.items類中添加text-align：center（ http://jsfiddle.net/cz19q7a9/ ）
.items
{
text-align: center;
}
解決方案3
0 2015-01-14 19:53:03
只需做一下margin: auto在div內部margin: auto設置，它將根據其父級居中。 這是一個例子 。
中心<div>里面一個<div>
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.