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

possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — TylerH, Jan 14 '15 at 19:56

score 0 · Accepted Answer · answered Jan 14 '15 at 19:48

0

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

answered Jan 14 '15 at 19:48

jmore009

12,863
1
19
34

Thank you very much! It worked :) I can't belive it was such an easy fix :) I will accept your answer in 10 mins :) – Grim Reaper Jan 14 '15 at 19:51
@Mateo226 No problem. Glad to help. Some times the answers are that simple. – jmore009 Jan 14 '15 at 20:13
1

its ok, now you know how to do this with `inline-block` – jmore009 Jan 14 '15 at 20:16

score 0 · Answer 2 · answered Jan 14 '15 at 19:49

0

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

.items
{
   text-align: center;
}

answered Jan 14 '15 at 19:49

deebs

1,390
10
23

Thanks but jmore was faster :) – Grim Reaper Jan 14 '15 at 19:51

score 0 · Answer 3 · answered Jan 14 '15 at 19:53

0

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

answered Jan 14 '15 at 19:53

Spencer Wieczorek

21,229
7
44
54

Center a div inside a div

3 Answers3