在 div 中居中 div

Question

我的 HTML 代码有问题我想将 division 内的东西居中，而 division 内。我不太确定如何。这是我的代码： 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 中心彼此相邻浮动。任何帮助都适用 :) 谢谢 1

Answer 1

由于您在 #basicInfo 和 #langs 上使用 display: inline-block，只需在父级 .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
}

FIDDLE

Answer 2

将 text-align: center 添加到您的 .items class (http://jsfiddle.net/cz19q7a9/)

.items
{
   text-align: center;
}

Answer 3

只需在div里面做margin: auto，它就会根据它的父级居中。 Here is an example.

在 div 中居中 div

Center a div inside a div

html

css

positioning