CSS: Как я могу расположить 2 элемента рядом друг с другом (inline-block), которые разделяют контейнер с другими элементами?

Question

Я создаю стиль пользователя для веб-сайта, поэтому я не могу изменить любой HTML, только чистый CSS.

<div class="container"></div>

   <divs>
   <h2s>
   <uls>
   <forms>
   <h3></h3>
   <p></p>

</div>

Я хочу, чтобы h3 и p находились рядом друг с другом и в горизонтальном центре контейнера. Итак, я дал им обоим показ:inline-block и text-align:center. Это заставило их быть рядом с каждым, но не по центру. text-align: center работает только если он применяется к контейнеру, но это будет центрировать весь текст других элементов всего сайта.

Я относительно новичок в CSS, и я искал способ сделать это, но безрезультатно.

Answer 1

Если у вас все в порядке с добавлением нового div, вы можете попробовать,

HTML

<div class = "container">
  <div class = "side_center">
    <h3>h3 element</h3>
    <p> p element </p>
    </div>
  </div>  

CSS

h3, p {
  display: inline-block;
}

.side_center {
  margin: 0px auto;
  display: table;
}  

Однако я рекомендую вам стилизовать часто используемые элементы, добавляя отдельный класс или идентификатор, так как это может повлиять на другие теги h3 и p на вашей странице. Вот корзина.

НОВОЕ РЕДАКТИРОВАНИЕ

h3 {
      text-align: center;
      margin-left: -253px;
  }  

 p {
     margin-top: -22px;
     margin-right: -189px;
     text-align: center;
  }  

PS: это касается только вашей ссылки.

Answer 2

Попробуйте опубликовать свой код в jsfiddle.

Насколько я понимаю, может быть, достаточно будет добавить маржу только для тегов h3 и p?

поле:0 авто;

Answer 3

Если вы используете display:inline-block; вам не нужно использовать какие-либо float приписывать.

Я предполагаю, что вы имеете в виду, что text-align:center; сделал их по центру горизонтально. Если вы хотите, чтобы они были отцентрированы вертикально, вы можете использовать vertical-align:middle;