Center a div inside a div

Question

I have a problem in my HTML code I want to center something that is inside a division that is inside a division. I am not really sure how. This is my code: HTML CODE(ACTUALLY A PHP FILE):

<!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:

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

Answer 1

Since you're using display: inline-block on #basicInfo and #langs just call text-align: center on the parent .items :

.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

add text-align: center to your .items class ( http://jsfiddle.net/cz19q7a9/ )

.items
{
   text-align: center;
}

Answer 3

Just do margin: auto on the inside div , it will center according to it's parent. Here is an example .