Центрируйте два divs в середине обертки

У меня есть эта проблема CSS:

<div id="wrap">
    <div id="left">I am div 1</div>
    <div id="right">I am div 2</div>
</div>

Я пытаюсь сделать "Я - div 1, я - div 2" , центр внутри div. Не знаю, как это объяснить. Дизайн только в процентах, жидкий дизайн, и я застрял.

Любые идеи?

Ответы

Ответ 1

Если я правильно понимаю ваш вопрос, это должно сработать:

#wrap {
    background: #e7e7e7;
    padding: 5%;
    text-align: center;
    width: 80%;  
}

#left, #right {
     background: #ccc;
     display: inline-block;    
     padding: 2%;   
}

Посмотреть пример

Это будет центрировать два блока div внутри упаковки, рядом.

РЕДАКТИРОВАТЬ: 2015 Flexbox Solution

Flexbox теперь гораздо шире поддерживается и, скорее всего, является лучшим решением в этой ситуации. Есть некоторые причуды, которые идут вместе с вышеупомянутым методом встроенного блока, таким как горизонтальный интервал и проблемы вертикального выравнивания. Вот решение flexbox:

#wrap {
    background: #e7e7e7;
    display: flex;
    justify-content: center;
    padding: 5%; 
    width: 80%;  
}

#left, #right {
    background: #ccc;
    padding: 2%;   
}

Посмотреть пример

Обязательно установите флажок Можно ли использовать, чтобы убедиться, что flexbox поддерживается в поддерживаемых вами браузерах.

Правка 2019 года: Commenter MC9000 показал, что мой пример не отвечает в процентах, как упоминалось в оригинальном вопросе. Я обновил свои примеры, чтобы показать, что это работает с размером в процентах, точно так же, как в пикселях.

Ответ 2

text-align:center; будет центрировать это для вас:

#wrap{
  width:50%;
  border: 1px solid #000;
}

#left, #right{
  text-align: center;
}

Демо: http://jsfiddle.net/DbNs6/1/