2015-01-14 4 views
1

У меня проблема в моем HTML-коде. Я хочу сосредоточить что-то внутри подразделения, находящегося внутри деления. Я не совсем уверен, как это сделать. Это мой код: HTML код (ФАКТИЧЕСКИ PHP-FILE):Центр div в div

<!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; 
} 

И это картина или проблема. The problem

Так что я хочу оранжевые коробки, чтобы плавать рядом друг с другом в центре DIV они находятся. Любая помощь appriciated :) Thanks1

+0

PHP здесь не имеет значения. Опубликуйте полученный HTML. – j08691

+0

Возможный дубликат [Горизонтально центр a div в div] (http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) – TylerH

+0

Я видел это как 3 раза, но It didnt work :) –

ответ

0

Поскольку вы используете display: inline-block на #basicInfo и #langs просто звоните text-align: center на родителе .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

+0

Большое спасибо! Это сработало :) Я не могу поверить, что это было такое легкое решение :) Я отвечу на ваш ответ через 10 минут :) –

+0

@ Mateo226 Нет проблем. Рад помочь. Несколько раз ответы такие простые. – jmore009

+1

его нормально, теперь вы знаете, как это сделать с 'inline-block' – jmore009

0

Просто сделайте margin: auto на внутренней div, это будет центр в соответствии с его родителей. Here is an example.

Смежные вопросы