Как работать с коробками? HTML Css

Question

Как работать с коробками? HTML Css

0

Я изучаю Css и пытаюсь сделать несколько коробок с текстом, которые были центрированы и встроены. Я попытался сделать это и придумал две проблемы, я не мог сосредоточить их, и когда я добавил больше текста в коробку, он изменил положение, хотя он остался того же размера. Вероятно, я могу выяснить первую проблему, но вторая меня захлестнула. Я создал скрипку этого. Помощь Plz!

http://jsfiddle.net/rP9BL/1/

Код Hml:

<article>

    <h3>Game Hall of Fame</h3>

    <p>As one of my projects, I made a demo of a gaming blog. </p>

</article>

<article>

    <h3>Game Hall of Fame</h3>

    <p>As one of my projects, !</p>
</article>

<article>
    <h3>Game Hall of Fame</h3>

    <p>As one of my projects, I made a demo of a gaming blog.</p>

</article>

<article>

    <h3>Game Hall of Fame</h3>

    <p>As one of my projects, I made a demo of a gaming blog. !</p>

</article>

CSS

article {
    background: #000000;
    margin:1em 1em 1em 1em;
    padding:.5em .5em .5em .5em;
    border-radius: 1em;
    width:200px;
    height:200px;
    display:inline-block;
    vertical-align:center;
    color:white;
}

Zachooz 02 дек. 2013, в 03:33

Источник

0

Вы имеете в виду вертикальное центрирование на странице, когда упоминаете, что не можете их центрировать? Или вы имеете в виду горизонтальный? Горизонтально легко; вертикали не будет.
Ming 02 дек. 2013, в 02:05
0

Я бы попытался упростить вашу скрипку следующим образом: jsfiddle.net/sheriffderek/LCBR3 И я бы перефразировал ваш вопрос. Центр каким образом? Если вы пытаетесь выровнять статьи по вертикали (которые являются divами с семантическим значением - и в этом случае у вас все правильно ...) Что выровнять по вертикали: middle; он центрирует их друг на друга, а не на поле, в котором они находятся. Поэтому, если они имеют одинаковый размер, они не будут отображаться вертикально по центру.
sheriffderek 02 дек. 2013, в 02:14

Теги:

html

css

3 ответа

2

Если вы экспериментируете с CSS и ящиками, я предлагаю использовать div, а не статью. Также вы используете display: inline-block, который вам, вероятно, нужен только для блока. Вы можете избавиться от центра vertical-align: center.

Johnny Harlamert 02 дек. 2013, в 00:43

0

Я не собираюсь голосовать против этого ... но это не ответ. Это в лучшем случае скромный комментарий.
sheriffderek 02 дек. 2013, в 02:11
1

Обратите внимание, что мне не хватает очков репутации, чтобы оставить комментарий, кроме моих собственных ответов.
Johnny Harlamert 02 дек. 2013, в 03:50
0

Хорошая вещь, чтобы сделать, это поместить их код в скрипку и очистить его. Голосуй за то, что ты самосознан.
sheriffderek 02 дек. 2013, в 03:55

Показать ещё 1 комментарий

0

article { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }

christian pocong 27 янв. 2019, в 07:26

Ещё вопросы

Вы имеете в виду вертикальное центрирование на странице, когда упоминаете, что не можете их центрировать? Или вы имеете в виду горизонтальный? Горизонтально легко; вертикали не будет.
Я бы попытался упростить вашу скрипку следующим образом: jsfiddle.net/sheriffderek/LCBR3 И я бы перефразировал ваш вопрос. Центр каким образом? Если вы пытаетесь выровнять статьи по вертикали (которые являются divами с семантическим значением - и в этом случае у вас все правильно ...) Что выровнять по вертикали: middle; он центрирует их друг на друга, а не на поле, в котором они находятся. Поэтому, если они имеют одинаковый размер, они не будут отображаться вертикально по центру.
Я не собираюсь голосовать против этого ... но это не ответ. Это в лучшем случае скромный комментарий.
Обратите внимание, что мне не хватает очков репутации, чтобы оставить комментарий, кроме моих собственных ответов.
Хорошая вещь, чтобы сделать, это поместить их код в скрипку и очистить его. Голосуй за то, что ты самосознан.

Ming · Accepted Answer · 2013-12-02T00-49-00.000Z

vertical-align: center; не является допустимым значением, но top или middle:

http://jsfiddle.net/rP9BL/3/

article {
    background: #000000;
    margin:1em 1em 1em 1em;
    padding:.5em .5em .5em .5em;
    border-radius: 1em;
    width:200px;
    height:200px;
    display:inline-block;
    vertical-align:top; /* here */
    color:white;
}

Кроме того, для горизонтального центрирования, поскольку вы используете inline-block, вы можете просто установить text-align: center; в родительский контейнер.

Как бы я сделал так, чтобы текст в полях не по центру?
Просто добавьте text-align: left; к article { } чтобы переопределить настройку родительского контейнера :)