Как Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π² html: Как Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π²Π΅Π±-страницы?

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Как Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ HTML ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° страницС HTML ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π΅ΡˆΠ°ΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для ΠΌΠ°ΠΊΠ΅Ρ‚Π° страницы. Один ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнных вопросов — ΠΊΠ°ΠΊ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ сСкции. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ обсудим мноТСство Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… способов размСщСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ области.

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ ΠΎΠ±Π΅Ρ€Ρ‚ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов, ΠΌΡ‹ сдСлаСм ΠΈΡ… сСрого Ρ†Π²Π΅Ρ‚Π°. Π˜Ρ‚Π°ΠΊ, приступим.

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Π΅

Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ, ΠΊΠ°ΠΊ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ элСмСнта-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ элСмСнт div, элСмСнт ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Π° ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚Π΅Π³ΠΈ.


<p>
    <img src="//msiter.ru/image.jpg" alt="ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Π°" />
</p>

<style>
.aligncenter {
    text-align: center;
}
</style>

Π—Π΄Π΅ΡΡŒ всю Ρ€Π°Π±ΠΎΡ‚Ρƒ Π΄Π΅Π»Π°Π΅Ρ‚ CSS свойство text-align: center;. Если Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ ΠΊΠΎΠ΄ CSS, Ρ‚ΠΎ Π²Π°ΠΌ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±ΡŠΡΡΠ½ΡΡ‚ΡŒ.

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ отступов

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊΠΎΠ²Ρ‹ΠΉ элСмСнт, достаточно ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ Π½Π΅ΠΌΡƒ ΡΡ‚ΠΈΠ»ΡŒ margin: auto;. Но извСстно, Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π³ img – это строковый элСмСнт. Как ΠΆΠ΅ Π±Ρ‹Ρ‚ΡŒ? ВсС ΠΎΡ‡Π΅Π½ΡŒ просто. Π§Ρ‚ΠΎΠ±Ρ‹ всС Π·Π°Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΎ, Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠΎΠ²Ρ‹ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ² CSS ΡΡ‚ΠΈΠ»ΡŒ display: block;.


<div>
    <img src="//msiter.ru/image.jpg" alt="ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅" />
</div>

<style>
.marginauto {
    margin: 10px auto 20px;
    display: block;
}
</style>

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ‚Π΅Π³Π° <center>

Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π³ <center> являСтся ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΌ ΠΈ Π½Π΅ поддСрТиваСтся Π² HTML5. Однако ΠΎΠ½ всС Π΅Ρ‰Π΅ распознаСтся Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ Π²Ρ€ΠΎΠ΄Π΅ Google Chrome.

РаньшС это Π±Ρ‹Π» ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π½Π΅ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π» Ρ‚Π°Π±Π»ΠΈΡ† стилСй, Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ простой HTML.

Нам Π½Π΅ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠ΅ элСмСнты Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅, поэтому здСсь Π½Π΅Ρ‚ дСмонстрации этого ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠΎΠ΄.


<center>
    <img src="//msiter.ru/image.jpg" alt="ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅" />
</center>

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° align=middle

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ использования CSS, ΠΏΠΎΡ…ΠΎΠΆΠΈΠΉ Π½Π° ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Π’ Π±ΠΎΠ»Π΅Π΅ старых вСрсиях HTML ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, устанавливая Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Ρ‚Π΅Π³Π° align=»middle».


<img align="middle" src="//msiter.ru/image.jpg" alt="ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅" />

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ изобраТСния ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ

Π’Ρ‹ΡˆΠ΅ ΠΌΡ‹ обсуТдали, ΠΊΠ°ΠΊ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π½ΠΎ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ случаи, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ.

Для этого Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΄Π²Π° шага. ΠžΠ±Π΅Ρ€Ρ‚ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ ячСйка Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π° Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ установлСно Π½Π° сСрСдину. Π’ нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ устанавливаСм Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ высоту для ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π²Ρ‹ΡˆΠ΅, Ρ‡Π΅ΠΌ наша ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°.


<div>
    <img src="//msiter.ru/image.jpg" alt="ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅" />
</div>

<style>
.verticalcenter {
    display: table-cell;
    height: 400px;
    vertical-align: middle;
}
</style>

ΠžΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅.


<div>
    <img src="//msiter.ru/image.jpg" alt="ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅" />
</div>

<style>
.verticalhorizontal {
    display: table-cell;
    height: 300px;
    text-align: center;
    width: 300px;
    vertical-align: middle;
}
</style>

НадССмся, Ρ‡Ρ‚ΠΎ сСгодня, ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Π² эту ΡΡ‚Π°Ρ‚ΡŒΡŽ, Π²Ρ‹ ΡƒΠ·Π½Π°Π»ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π½ΠΎΠ²ΠΎΠ΅, ΠΈ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ знания ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ своих сайтов.

Как Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π² html

Но Ρ‚Π°ΠΊΠΆΠ΅ Π΄Π°Π²Π½ΠΎ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ задСйствованы Π½Π° Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡƒΠΆΠ΅ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ CSS. Для Π½Π°Ρ‡Π°Π»ΠΎ Π½ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ div ΠΎΠ±Π΅Ρ€Ρ‚ΠΊΠ°, Π½ΠΎ ΠΈ бСзусловно сам ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» Π² Π²ΠΈΠ΄Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. И здСсь ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π΄Π΅Π»ΠΎΠΌ ΠΌΡ‹ создаСм div класс, ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ center-picture, Π³Π΄Π΅ Π² послСдствиС Π² Π½Π΅Π³ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Когда Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ цСнтрирования Ρ‡Π΅Π³ΠΎ-Π»ΠΈΠ±ΠΎ ΠΊΠ°ΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, Ρ‚ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½Π½ΠΎΠΉ для достиТСния. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим нСсколько ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт.

Π”Π°Π»Π΅Π΅ остаСтся Π²Ρ‹ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ стили для Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ класса center-picture, Π³Π΄Π΅ Π·Π°Π΄Π°Π΅ΠΌ высоту ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ,которая ΠΈΠ΄Π΅Ρ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ большС Ρ‡Π΅ΠΌ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°, Π° Ρ‚Π°ΠΊΠΆΠ΅ поставим ΠΎΠ±Π²ΠΎΠ΄ ΠΈΠ»ΠΈ Ρ€Π°ΠΌΠΊΡƒ, Π³Π΄Π΅ 1px пиксСля Π² Π²ΠΏΠΎΠ»Π½Π΅ Ρ…Π²Π°Ρ‚ΠΈΡ‚.

Π“Π΄Π΅ послС установки ΠΌΡ‹ Π±ΡƒΠ΄Π΅Π½ Π½Π°Π±Π»ΡŽΠ΄Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

1. Π’Π°Ρ€ΠΈΠ°Π½Ρ‚: ДобавляСм ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ класс .center-picture.

Π­Ρ‚ΠΎΡ‚ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ свойство display, Π³Π΄Π΅ ΠΈΠ΄Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅

block, Ρ‡Ρ‚ΠΎ Π½Π΅ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ Π±Π΅Π· margin:auto. ВСроятно Ρ‚Π°ΠΊΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΌΠ½ΠΎΠ³ΠΈΠΌ Π·Π½Π°ΠΊΠΎΠΌ ΠΏΠΎ своСй структурС, Π³Π΄Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΆΠ΅ задСйствовали Π΅Π³ΠΎ для цСнтрирования div. Π“Π»Π°Π²Π½ΠΎΠ΅ нСльзя Π·Π°Π±Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ любоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ΄Π΅Ρ‚ ΠΊΠ°ΠΊ строчный элСмСнт, Π³Π΄Π΅ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊ основС display:block.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ смотрим, ΠΊΠ°ΠΊ получится, послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ поставитС ΠΈ всС сохранитС Π½Π° сайтС.

2. Π’Π°Ρ€ΠΈΠ°Π½Ρ‚: с классом image-align

Π—Π΄Π΅ΡΡŒ Π½ΡƒΠΆΠ½ΠΎ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ прСдоставлСнный html ΠΊΠΎΠ΄, Ρ‡Ρ‚ΠΎ присутствуСт Π² этом ΠΌΠ΅Ρ‚ΠΎΠ΄Π΅. Π“Π΄Π΅ ΠΊ DIV karkas-bloka добавляСм Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ класс image-align. А Π²ΠΎΡ‚ ΠΎΡΡ‚Π°Π²ΡˆΠΈΠΉΡΡ класс .image-center Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ, ΠΎΠ½ Ρ‚Π°ΠΌ лишний.

Π­Ρ‚ΠΎΡ‚ способ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС содСрТимоС, Ρ‡Ρ‚ΠΎ находится Π² DIV ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ text-align : center. Π—Π΄Π΅ΡΡŒ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ, Ссли прописываСм тСкст Π² DIV, Ρ‚ΠΎ ΠΎΠ½ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ.

Но ΠΈ сам Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ послС ΠΊΠ°ΠΊ всС поставим.

3. Π’Π°Ρ€ΠΈΠ°Π½Ρ‚: Π½Π° свойствС display:flex

Π­Ρ‚ΠΎΡ‚ способ Π±ΡƒΠ΄Π΅ΠΌ ΠΎΡΠ½ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ Π½Π° свойствС display:flex – Π³Π΄Π΅ Π½ΡƒΠΆΠ½ΠΎ Π²Π·ΡΡ‚ΡŒ ΠΊΠΎΠ΄ html, Ρ‡Ρ‚ΠΎ Ρ€Π°Π½Π΅Π΅ Π±Ρ‹Π» задСйствован Π½Π° Π²Ρ‚ΠΎΡ€ΠΎΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π΅, ΠΈ Ρ‚Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ класс image-align Π½Π° image-flex.

Если ΠΊΡ‚ΠΎ Π΅Ρ‰Π΅ Π½Π΅ Π·Π½Π°Π΅Ρ‚, Ρ‚ΠΎ свойство align-items ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, Π° Π²ΠΎΡ‚ justify-content ΡƒΠΆΠ΅ задСйствовано ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ. Π­Ρ‚ΠΎΡ‚ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π΄Π²ΡƒΡ… ΠΈΠΌΠ΅Π΅Ρ‚ свою нСбольшой плюс, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π΄Π²ΡƒΠΌ осям.

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ div Π½Π° страницС ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ

ΠŸΡ€ΠΈ построСнии ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²Π΅Π±-страниц Π²Ρ‹, вСроятно, ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°Π»ΠΈΡΡŒ с ситуациСй, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ div ΠΊΠ°ΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ чистого CSS.

Π•ΡΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ нСсколько способов Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ этого, Π½ΠΎ этот ΡΡ‡ΠΈΡ‚Π°ΡŽ самым популярным.

ΠΠ±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π² CSS ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это просто с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ text-align: center; ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ со встроСнными элСмСнтами ΠΈΠ»ΠΈ margin: 0 auto; ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌ элСмСнтом.

На этом Π½Π΅ Π·Π°ΠΊΠ°Π½Ρ‡ΠΈΠ²Π°Π΅ΠΌ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹, Π½ΠΎ эти самыС Ρ…ΠΎΠ΄ΠΎΠ²Ρ‹Π΅, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΡ‚ΡŒ. Π“Π΄Π΅ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ вас Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ вопрос ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π²Ρ‹ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ сами Π²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π½Π΅ Ρ‡Π΅Π³ΠΎ слоТного Π² этом Π½Π΅Ρ‚, Π² ΠΏΠ»Π°Π½Π΅ ΠΊΠ°ΠΊ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ div.

Π’ΠΈΠ΄Π΅ΠΎ ΠΎΠ±Π·ΠΎΡ€ с пояснСниСм Π½Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹:

Π’ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ Ρ‚Ρ€ΠΈ распространСнных способа, ΠΊΠ°ΠΊ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ экрана, Π³Π΄Π΅ задСйствуСм HTML ΠΈ CSS. Π­Ρ‚ΠΎ касаСтся ΠΊΠ°ΠΊ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ, Π³Π΄Π΅ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ элСмСнт ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, Ρ‚Π°ΠΊ ΠΈ самого Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, это ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ слово, Ρ‡Ρ‚ΠΎΠ± ΠΎΠ½ΠΎ Ρ€ΠΎΠ²Π½ΠΎ Π±Ρ‹Π»ΠΎ ΠΎΡ‚ Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅. НС сСкрСт, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ всС ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π° bb ΠΊΠΎΠ΄Π°Ρ…, Π½ΠΎ это касаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ описаниС, Π½ΠΎ ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.
Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6. 0+1.0+9.0+1.0+1.0+1.0+1.0+

Π—Π°Π΄Π°Ρ‡Π°

Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ с подписью ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ Π²Π΅Π±-страницы.

РСшСниС

Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ ΠΊ тСксту часто Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°ΡŽΡ‚ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π²Π΅Π±-страницы, ΠΏΡ€ΠΈ этом тСкст располагаСтся Π΄ΠΎ ΠΈ послС изобраТСния. Π’Π°ΠΊΠΎΠ΅ располоТСниС элСмСнтов позволяСт Ρ€Π°Π·Π±ΠΈΡ‚ΡŒ большой тСкст Π½Π° смысловыС Π±Π»ΠΎΠΊΠΈ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ рисункам.

Π’Π½Π°Ρ‡Π°Π»Π΅ рассмотрим Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ изобраТСния ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ. Для этого ΠΊ сСлСктору P слСдуСт Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ стилСвоС свойство text-align со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ center . ΠŸΡ€ΠΈ этом Ρ‚Π΅Π³ Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π°Π±Π·Π°Ρ†Π° (Ρ‚Π΅Π³

). Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ всС Π°Π±Π·Π°Ρ†Ρ‹ Π½Π° страницС Π½Π°Ρ‡Π°Π»ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, Π²Π²Π΅Π΄Π΅ΠΌ свой класс fig , ΠΈ всС дСйствия Π±ΡƒΠ΄Π΅ΠΌ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ с Π½ΠΈΠΌ. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ 1 ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 1. ИспользованиС text-align

HTML5 CSS 2.1 IE Cr Op Sa Fx

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° продСмонстрирован Π½Π° рис. 1.

Рис. 1. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Π½ΠΎΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π²Π΅Π±-страницы

Π’Π°ΠΊΠΆΠ΅ ΠΊ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΈΡΡƒΠ½ΠΎΡ‡Π½ΡƒΡŽ подпись. ВСкст Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ сразу ΠΆΠ΅ послС изобраТСния ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ Π΅ΠΌΡƒ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ. Π—Π΄Π΅ΡΡŒ всё просто, ΠΎΠΏΡΡ‚ΡŒ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ нашим классом, Π½ΠΎ ΡƒΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ Π΅Π³ΠΎ ΠΊ Ρ‚Π΅Π³Ρƒ . Π§Ρ‚ΠΎΠ±Ρ‹ тСкст подписи отличался ΠΏΠΎ своСму Π²ΠΈΠ΄Ρƒ ΠΎΡ‚ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… Π°Π±Π·Π°Ρ†Π΅Π², сдСлаСм Π΅Π³ΠΎ курсивным ΠΈ Π²Ρ‹Π΄Π΅Π»ΠΈΠΌ Π΄Ρ€ΡƒΠ³ΠΈΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ (ΠΏΡ€ΠΈΠΌΠ΅Ρ€ 2).

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 2. ΠŸΠΎΠ΄Ρ€ΠΈΡΡƒΠ½ΠΎΡ‡Π½Π°Ρ подпись

HTML5 CSS 2.1 IE Cr Op Sa Fx

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис. 2.

Рис. 2. Подпись ΠΏΠΎΠ΄ рисунком

Для Π±Π»ΠΎΠΊΠ° с Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠ΅ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π΅Π³ , Π° для подписи ΠΊ Π½Π΅ΠΌΡƒ Ρ‚Π΅Π³ . Π‘Ρ‚Π°Ρ€Ρ‹Π΅ вСрсии IE Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚ эти Ρ‚Π΅Π³ΠΈ, поэтому ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для Π½ΠΈΡ… добавляСтся нСбольшой скрипт.

ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΠΉ вас Π½Π° сайтС Impuls-Web!

Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ часто, ΠΏΡ€ΠΈ вСрсткС сайтов Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ сталкиваСтся с Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒΡŽ выравнивания ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ. И Ссли для ΠΎΠΏΡ‹Ρ‚Π½ΠΎΠ³ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° это Π½Π΅ являСтся ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, Ρ‚ΠΎ Ρƒ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰Π΅Π³ΠΎ это ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ трудности.

Навигация ΠΏΠΎ ΡΡ‚Π°Ρ‚ΡŒΠ΅:

Π― ΠΏΠΎΠΊΠ°ΠΆΡƒ Π²Π°ΠΌ нСсколько способов выравнивания ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ html ΠΈ css , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ смоТСтС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² зависимости ΠΎΡ‚ ситуации.

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ HTML

Кода Π²Ρ‹ вСрстаСтС страницу, ΠΈ Π² ΠΊΠ°ΠΊΠΎΠΌ-Ρ‚ΠΎ Π΅Π΄ΠΈΠ½ΠΈΡ‡Π½ΠΎΠΌ случаС Π²Ρ‹ Π·Π°Ρ€Π°Π½Π΅Π΅ Π·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Π΄Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π±Π»ΠΎΠΊΠ°, Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ выравнивания ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π² html ΠΊΠΎΠ΄Π΅, ΠΎΠ±Π΅Ρ€Π½ΡƒΠ² ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² Ρ‚Π΅Π³

АдаптивноС Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠ°ΠΊ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎ Π²Ρ‹ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

1

Π”Π²Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ

<div>
	<a href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-2.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a>	
</div>
.photos {
	text-align: center;
	margin: 0 0 20px 0;
	overflow: hidden;    
}
.photos a {
	width: 50%;
	display: block;
	float: left;
	line-height: 0;
}
.photos img {
	width: 100%;
	height: auto;
}

2

Π’Ρ€ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ

<div>
	<a href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-2.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp. ru/img/city-5.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-6.jpg" alt=""></a>	
</div>
.photos {
	text-align: center;
	margin: 0 0 20px 0;
	overflow: hidden;    
}
.photos a {
	width: 33.3%;
	display: block;
	float: left;
	line-height: 0;
}
.photos img {
	width: 100%;
	height: auto;
}

3

Π§Π΅Ρ‚Ρ‹Ρ€Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ

<div>
	<a href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-2.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-5.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-6.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-7.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-8.jpg" alt=""></a>	
</div>
.photos {
	text-align: center;
	margin: 0 0 20px 0;
	overflow: hidden;    
}
.photos a {
	width: 25%;
	display: block;
	float: left;
	line-height: 0;
}
.photos img {
	width: 100%;
	height: auto;
}

4

Для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ…

Π”ΠΎΠ±Π°Π²ΠΈΠΌ стили, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹Π²Π΅Π΄ΡƒΡ‚ Ρ„ΠΎΡ‚ΠΎ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ экрана Π΄ΠΎ 800px.

@media screen and (max-width: 800px) {
	.photos a {
		width: 100%;
		float: none;
	}
}

Как Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ тСкст ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Β» Π‘Π»ΠΎΠ³ АндрСя Π‘ΠΎΠ½Π΄Π°Ρ€Π΅Π½ΠΊΠΎ

ЗдравствуйтС, ΡƒΠ²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ. БСгодня Ρƒ нас Ρ‚Π΅ΠΌΠ°: «Как Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ тСкст ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒΒ». Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π½Π° страницС сайта Π±Ρ‹Π»ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ? Π•ΡΡ‚ΡŒ нСсколько способов.

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ β€” способ β„–1

Π­Ρ‚ΠΎΡ‚ способ считаСтся Π½Π΅ совсСм ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ, Π½ΠΎ всё ΠΆΠ΅ расскаТу ΠΈ ΠΎ Π½Ρ‘ΠΌ. НуТно тСкст ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΡΡ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΡΡ <center>.

<center> тСкст ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° </center> 
Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ β€” способ β„–2

МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ <div> ΠΈΠ»ΠΈ <p>, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ тСкст ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΡΡ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΡΡ Ρ‚Π΅Π³ΠΎΠΌ <div> ΠΈΠ»ΠΈ <p>.

<div> тСкст ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° </div>
<p> тСкст ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° </p>
Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ β€” способ β„–3

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ <div> ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, Π½ΠΎ всС Π΅Π³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π² Ρ„Π°ΠΉΠ»Π΅ css, Ссли Π’Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ CSS.

 <div> тСкст ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° </div> 

Π’ Ρ„Π°ΠΉΠ»Π΅ css создаём класс:

 .center {text-align: center;} 
Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ β€” способ β„–4

Всё ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ класс Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ прямо Π² ΠΊΠΎΠ΄Π΅ страницы, ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΡΡ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΡΡ Ρ‚Π΅Π³ΠΎΠΌ <style>.

 <style> .center {text-align: center;} </style>
<div> тСкст ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° </div>

ΠŸΡ€ΠΈ использовании любого ΠΈΠ· Π²Ρ‹ΡˆΠ΅ΠΎΠΏΠΈΡΠ°Π½Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², тСкст ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ располоТСно ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ области, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π’Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

БСгодня ΠΌΡ‹ рассмотрСли Ρ‚Π΅ΠΌΡƒ: «Как Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ тСкст ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒΒ». Π£Π·Π½Π°Π»ΠΈ нСсколько способов ΠΊΠ°ΠΊ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°.

НадСюсь ΡΡ‚Π°Ρ‚ΡŒΡ Π±Ρ‹Π»Π° Π²Π°ΠΌ ΠΏΠΎΠ»Π΅Π·Π½Π°. Π”ΠΎ встрСчи Π² Π½ΠΎΠ²Ρ‹Ρ… ΡΡ‚Π°Ρ‚ΡŒΡΡ….

✍

Π‘ ΡƒΠ²Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, АндрСй Π‘ΠΎΠ½Π΄Π°Ρ€Π΅Π½ΠΊΠΎ.

html — Как Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ изобраТСния ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΈ HTML?

Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ эти Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ Π² своСм div. Как ΠΌΠ½Π΅ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ?

Π’ΠΎΡ‚ ΠΌΠΎΠΉ jsfiddle: https://jsfiddle.net/huskydawgs/vm4d3a1q/1/

Π’ΠΎΡ‚ ΠΌΠΎΠΉ HTML:

<div>
<div>
    <img src="http://cdn.gottabemobile.com/wp-content/uploads/2012/05/sprint-logo1-620x308.jpg" alt="Sprint" /></div>
<div>
    <img src="http://cdn-3.famouslogos.us/images/bank-of-america-logo.jpg" alt="Bank of America" /></div>
<div>
    <img src="http://www.underconsideration.com/brandnew/archives/Dell_Logo_Tagline.jpg" alt="Dell" /></div>
<div>
    <img src="http://www.unitedrentals.com/static/images/ur-logo.png" alt="United Rentals" /></div>
<div>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Ford_Motor_Company_Logo.svg/2000px-Ford_Motor_Company_Logo.svg.png" alt="United Rentals" /></div>

Π’ΠΎΡ‚ ΠΌΠΎΠΉ CSS:

.container-5col {
display: flex;
justify-content: center;
}

.container-5col > div {
    margin: 10px;
    padding: 10px;
    text-align: center;
}

.box-5col-1 {
    width: 20%;
}

.box-5col-2 {
    width: 20%;
}

.box-5col-3 {
    width: 20%;
}

.box-5col-4 {
    width: 20%;
}

.box-5col-5 {
    width: 20%;
}

1

user3075987 3 Π‘Π΅Π½ 2015 Π² 22:07

2 ΠΎΡ‚Π²Π΅Ρ‚Π°

Π›ΡƒΡ‡ΡˆΠΈΠΉ ΠΎΡ‚Π²Π΅Ρ‚

Π—Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ justify-content: center Π½Π° align-items: center

Как это:

.container-5col {
    display: flex;
    align-items: center;
}

1

Sergio Marron 3 Π‘Π΅Π½ 2015 Π² 19:13

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ этого с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ отобраТСния, которая поддСрТиваСтся Π² IE 8+

Css

. container-5col {
    display: table;
}

    .container-5col > div {
        width: 20%;
        margin: 10px;
        padding: 10px;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ JsFiddle JsFiddle.

1

Andrew 3 Π‘Π΅Π½ 2015 Π² 19:18

Как Ρ‚ΠΎΡ‡Π½ΠΎ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π½Π° страницС слайдов ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ?

ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡƒΡ€ΠΎΠΊΠ° прСдставлСны с использованиСм ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ MS PowerPoint 2007.

Π‘ΠΎΠ»ΡŒΡˆΠ°Ρ Ρ‡Π°ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ Microsoft PowerPoint для выравнивания ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π½Π° слайдС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ пСрСтаскиваниС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ. Π›ΠΈΠ±ΠΎ Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‚ Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΈ стрСлками ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°ΡŽΡ‚ Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ². Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ слоТно Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ высокой точности позиционирования. Π›ΡƒΡ‡ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ встроСнныС инструмСнты PowerPoint.

ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρƒ нас Π½Π° слайдС Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Ρ‹ 3 ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°. И Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΡ… располоТСниС ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ смСщСн максимально Π²ΠΏΡ€Π°Π²ΠΎ. На прСдставлСнном Π½ΠΈΠΆΠ΅ рисункС Ρ‚Π°ΠΊΠΈΠΌ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠΌ являСтся срСдний.Β 

Для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ выдСляСм всС Ρ‚Ρ€ΠΈ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, с использованиСм клавиши Β«CtrlΒ»). НаТимаСм Β«CtrlΒ» ΠΈ, Π½Π΅ отпуская, ΠΏΠΎΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΠΎ скликаСм ΠΏΠΎ всСм ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°ΠΌ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ.

Π”Π°Π»Π΅Π΅, Π·Π°Ρ…ΠΎΠ΄ΠΈΠΌ Π² мСню Β«Π€ΠΎΡ€ΠΌΠ°Ρ‚Β» — Β«Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽΒ»:

Π’ ΠΈΡ‚ΠΎΠ³Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Ρ‚ΠΎΡ‡Π½ΠΎ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠ² ΠΏΠΎ самому ΠΏΡ€Π°Π²ΠΎΠΌΡƒ:

Аналогичным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ любой сторонС, ΠΊΠ°ΠΊ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ.

Если Π² настройках выравнивания Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Β«Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ слайда» (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρƒ нас Π±Ρ‹Π»ΠΎ Β«Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹Β»),

Ρ‚ΠΎ всС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΏΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ «По ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽΒ» смСстятся ΠΊ ΠΏΡ€Π°Π²ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Π΅ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ слайда.

Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊΠΎ всСму, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ сСтку ΠΈ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π΅Π΅ отобраТСния (Β«ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ сСтку» ΠΈ Β«ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ сСтки»). Π‘Π΅Ρ‚ΠΊΠ° позволяСт Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ Π½Π°Π±Π»ΡŽΠ΄Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π½Π° слайдС.

И Π½Π°ΠΊΠΎΠ½Π΅Ρ†, инструмСнт позволяСт Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹, ΠΊΠ°ΠΊ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ (см. ΠΎΠ΄Π½ΠΎΠΈΠΌΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню).

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, инструмСнт Β«Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒΒ» поваляСт ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎ ΠΈ с максимальной Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ мСстополоТСниС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π½Π° слайдС Π΄Ρ€ΡƒΠ³ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³Π° ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ самого слайда. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ это касаСтся Π»ΡŽΠ±Ρ‹Ρ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ², создаваСмых Π½Π° слайдС: тСкст, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ°, Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ.

Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS для цСнтрирования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² HTML

Π§Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ

  • Для цСнтрирования тСкста ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ (Β«[/]Β» ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Ρ€Π°Π·Ρ€Ρ‹Π² строки): .center {[/] text-align: center; [/]} .
  • Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ Π±Π»ΠΎΠΊΠΈ содСрТимого со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ (Β«[/]Β» ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Ρ€Π°Π·Ρ€Ρ‹Π² строки): .center {[/] margin: auto; [/] ΡˆΠΈΡ€ΠΈΠ½Π°: 80em; [/]} .
  • Для цСнтрирования изобраТСния (Β«[/]Β» ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Ρ€Π°Π·Ρ€Ρ‹Π² строки): img.center {[/] display: block; [/] ΠΌΠ°Ρ€ΠΆΠ° слСва: Π°Π²Ρ‚ΠΎ; [/] margin-right: Π°Π²Ρ‚ΠΎ; [/]} .

CSS — Π»ΡƒΡ‡ΡˆΠΈΠΉ способ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты, Π½ΠΎ это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ сущСствуСт мноТСство способов ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS для цСнтрирования тСкста, Π±Π»ΠΎΠΊΠΎΠ² тСкста ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ тСкста с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ свойство стиля для цСнтрирования тСкста Π½Π° страницС:

.center {
Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ;
}

Π’ этой строкС CSS ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π°Π±Π·Π°Ρ† написан с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ.класс center Π±ΡƒΠ΄Π΅Ρ‚ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ своСго Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта. НапримСр, Π°Π±Π·Π°Ρ† Π²Π½ΡƒΡ‚Ρ€ΠΈ подраздСлСния (Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ элСмСнт этого подраздСлСния) Π±ΡƒΠ΄Π΅Ρ‚ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ примСнСния этого класса Π² HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅:

 

Π­Ρ‚ΠΎΡ‚ тСкст располоТСн ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.


ΠŸΡ€ΠΈ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ тСкста с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства text-align ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ Π²Π½ΡƒΡ‚Ρ€ΠΈ содСрТащСго Π΅Π³ΠΎ элСмСнта, Π° Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ самой страницы.

Π§ΠΈΡ‚Π°Π΅ΠΌΠΎΡΡ‚ΡŒ всСгда ΠΈΠΌΠ΅Π΅Ρ‚ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΊΠΎΠ³Π΄Π° Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ тСкстС Π²Π΅Π±-сайта. Π‘ΠΎΠ»ΡŒΡˆΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ тСкста с Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎΡ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΌΠΈ, поэтому ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ этот ΡΡ‚ΠΈΠ»ΡŒ с ΠΎΡΡ‚ΠΎΡ€ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΈ нСбольшиС Π±Π»ΠΎΠΊΠΈ тСкста, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ тСкст Ρ‚ΠΈΠ·Π΅Ρ€Π° для ΡΡ‚Π°Ρ‚ΡŒΠΈ, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π»Π΅Π³ΠΊΠΎ Ρ‡ΠΈΡ‚Π°ΡŽΡ‚ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ располоТСны ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ; Ρ‚Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, большиС Π±Π»ΠΎΠΊΠΈ тСкста, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ цСлая ΡΡ‚Π°Ρ‚ΡŒΡ, Π±Ρ‹Π»ΠΎ Π±Ρ‹ слоТно Π²ΠΎΡΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Ссли Π±Ρ‹ ΠΎΠ½ΠΈ Π±Ρ‹Π»ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ² содСрТимого с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Π‘Π»ΠΎΠΊΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ с использованиСм HTML

.Ρ†Π΅Π½Ρ‚Ρ€ {
ΠΌΠ°Ρ€ΠΆΠ°: Π°Π²Ρ‚ΠΎ;
ΡˆΠΈΡ€ΠΈΠ½Π°: 80em;
}

Π­Ρ‚ΠΎ сокращСниС CSS для свойства margin установит для Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ поля Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 0, Π° для Π»Π΅Π²ΠΎΠ³ΠΎ ΠΈ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«autoΒ». По сути, это Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ любоС доступноС пространство ΠΈ Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ Π΄Π΅Π»ΠΈΡ‚ Π΅Π³ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ двумя сторонами ΠΎΠΊΠ½Π° просмотра, эффСктивно цСнтрируя элСмСнт Π½Π° страницС.

Π—Π΄Π΅ΡΡŒ это примСняСтся Π² HTML:

 
Π’Π΅ΡΡŒ Π±Π»ΠΎΠΊ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½,
, Π½ΠΎ тСкст Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ.

Пока ваш Π±Π»ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ содСрТащСго элСмСнта. ВСкст, содСрТащийся Π² этом Π±Π»ΠΎΠΊΠ΅, Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ, Π° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ. Π­Ρ‚ΠΎ связано с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ тСкст ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст Ρ‚Π°ΠΊΠΆΠ΅ Π±Ρ‹Π» Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство text-align, описанноС Ρ€Π°Π½Π΅Π΅, Π² сочСтании с этим ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅.

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Π₯отя Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ изобраТСния ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ с использованиСм Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ свойства text-align, консорциум W3C это Π½Π΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅Ρ‚.Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, всСгда Π΅ΡΡ‚ΡŒ шанс, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄ΡƒΡ‰ΠΈΠ΅ вСрсии Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΌΠ΅Ρ‚ΠΎΠ΄.

ВмСсто использования выравнивания тСкста для цСнтрирования изобраТСния Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ явно ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ являСтся элСмСнтом уровня Π±Π»ΠΎΠΊΠ°. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ, ΠΊΠ°ΠΊ ΠΈ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π±Π»ΠΎΠΊ. Π’ΠΎΡ‚ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ:

img.center {
display: block;
ΠΌΠ°Ρ€ΠΆΠ° слСва: Π°Π²Ρ‚ΠΎ;
ΠΏΠΎΠ»Π΅ справа: Π°Π²Ρ‚ΠΎ;
}
class = «ql-syntax»>

А Π²ΠΎΡ‚ HTML-ΠΊΠΎΠ΄ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½ΡƒΠΆΠ½ΠΎ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ:

 
class = «ql-syntax»>

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ встроСнного CSS (см. НиТС), Π½ΠΎ этот ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Π½Π΅ рСкомСндуСтся, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ добавляСт Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ стили Π² Π²Π°ΡˆΡƒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ HTML.ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΡΡ‚ΠΈΠ»ΡŒ ΠΈ структура Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ; Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ стилСй CSS Π² HTML Π½Π°Ρ€ΡƒΡˆΠΈΡ‚ это Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅, ΠΈ поэтому Π²Π°ΠΌ слСдуСт ΠΏΠΎ возмоТности ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ Π΅Π³ΠΎ.

 
class = «ql-syntax ql-align-center»>

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ всСгда Π±Ρ‹Π»ΠΎ слоТной Π·Π°Π΄Π°Ρ‡Π΅ΠΉ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, Π½ΠΎ выпуск модуля CSS Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π±Π»ΠΎΠΊΠ° Π² CSS3 прСдоставляСт способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это.

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΌΡƒ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΡŽ, описанному Π²Ρ‹ΡˆΠ΅.Бвойство CSS ΠΈΠΌΠ΅Π΅Ρ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

.vcenter {
vertical-align: middle;
}

ВсС соврСмСнныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ этот ΡΡ‚ΠΈΠ»ΡŒ CSS. Если Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ со старыми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, W3C Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅Ρ‚ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ тСкст Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. Для этого помСститС элСмСнты Π²Π½ΡƒΡ‚Ρ€ΠΈ содСрТащСго элСмСнта, Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ div, ΠΈ установитС для Π½Π΅Π³ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ высоту. ΠžΠ±ΡŠΡΠ²ΠΈΡ‚Π΅ содСрТащий элСмСнт ΠΊΠ°ΠΊ ячСйку Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ установитС Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π½Π° «сСрСдину».

НапримСр, Π²ΠΎΡ‚ CSS:

.vcenter {
min-height: 12em;
дисплСй: Ρ‚Π°Π±Π»ΠΈΡ†Π°-ячСйка;
vertical-align: middle;
}

А Π²ΠΎΡ‚ HTML:

 

Π­Ρ‚ΠΎΡ‚ тСкст располоТСн ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ поля ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ.

НС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ элСмСнт HTML для цСнтрирования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ тСкста; ΠΎΠ½ устарСл, ΠΈ соврСмСнныС Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ большС Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Π΅Π³ΠΎ. Π­Ρ‚ΠΎ ΠΏΠΎ большСй части являСтся ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠΌ Π½Π° Ρ‡Π΅Ρ‚ΠΊΠΎΠ΅ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ структуры ΠΈ стиля Π² HTML5: HTML создаСт структуру, Π° CSS Π΄ΠΈΠΊΡ‚ΡƒΠ΅Ρ‚ ΡΡ‚ΠΈΠ»ΡŒ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ — это Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Π°Ρ характСристика элСмСнта (Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ выглядит, Π° Π½Π΅ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π΅ΡΡ‚ΡŒ), этот ΡΡ‚ΠΈΠ»ΡŒ обрабатываСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS, Π° Π½Π΅ HTML.ВмСсто этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваши страницы ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈΡΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΈ соотвСтствовали соврСмСнным стандартам.

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠ΅ вСрсии Internet Explorer

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Internet Explorer (IE), Π° Π·Π°Ρ‚Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ условныС ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ IE Π²ΠΈΠ΄Π΅Π» стили, Π½ΠΎ ΠΎΠ½ΠΈ Π±Ρ‹Π»ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΌΠΈ ΠΈ Π½Π΅ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ. Однако Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Microsoft ΠΎΡ‚ 2015 Π³ΠΎΠ΄Π° ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ старых вСрсий IE сдСлаСт это Π½Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ IE Π²Ρ‹ΠΉΠ΄Π΅Ρ‚ ΠΈΠ· употрСблСния.

Бпасибо, Ρ‡Ρ‚ΠΎ сообщили Π½Π°ΠΌ!

РасскаТитС, ΠΏΠΎΡ‡Π΅ΠΌΡƒ!

Π”Ρ€ΡƒΠ³ΠΎΠΉ НСдостаточно подробностСй Π‘Π»ΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ (ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ) изобраТСния Π² Π±Π»ΠΎΠΊΠ΅

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ (ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ) изобраТСния Π² Π±Π»ΠΎΠΊΠ΅

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ°

ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, большСго, Ρ‡Π΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈ с Π·Π°Π΄Π°Π½Π½Ρ‹ΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ.Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ являСтся Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ, это настоящий элСмСнт .

Π›ΡŽΠ±ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‡Π΅Ρ‚ΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, поэтому самый простой ΠΈ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΉ способ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ:

  • ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹ΠΌ: Π±Π»ΠΎΠΊ
  • Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Π»Π΅Π²ΠΎΠ΅ ΠΈ Π²Π΅Ρ€Ρ…Π½Π΅Π΅ поля , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. КаТдоС ΠΈΠ· этих Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ поля, ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, составляСт ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ Ρ€Π°Π·Π½ΠΈΡ†Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ изобраТСния.

НапримСр, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ изобраТСния Π΄Π²ΡƒΡ… Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ², Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Ρ„ΠΎΡ‚ΠΎΠ³Π°Π»Π΅Ρ€Π΅Π΅ с Β«Π°Π»ΡŒΠ±ΠΎΠΌΠ½Ρ‹ΠΌΠΈΒ» ΠΈ Β«ΠΏΠΎΡ€Ρ‚Ρ€Π΅Ρ‚Π½Ρ‹ΠΌΠΈΒ» изобраТСниями, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°Ρ… фиксированного Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΡ€ΠΈΡΠ²ΠΎΠΈΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΄Π²ΡƒΡ… классов (с Ρ€Π°Π·Π½Ρ‹Π΅ поля) Ρ€Π΅ΡˆΠΈΡ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ.

Но Π΅ΡΡ‚ΡŒ случаи, ΠΊΠΎΠ³Π΄Π° Π½Π΅ хочСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄. НапримСр, ΠΊΠΎΠ³Π΄Π° задСйствовано ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, всС с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ, ΠΈ нСцСлСсообразно Π½Π°Π·Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ поля для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ…, ΠΈΠ»ΠΈ ΠΊΠΎΠ³Π΄Π° Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΈ изобраТСния Π½Π΅ Π²Ρ‹Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² ΠΎΠ΄Π½ΠΈΡ… ΠΈ Ρ‚Π΅Ρ… ΠΆΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ… ( пиксСлСй, , em , % ,…), ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π²Ρ‹Ρ‡ΠΈΡΠ»ΠΈΡ‚ΡŒ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. Π‘Ρ‹Π»ΠΎ Π±Ρ‹ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, нСзависимо ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° изобраТСния.

РСшСниС

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ нСслоТно.Если ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ остаСтся с встроСнным дисплССм ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ , Ρ‚ΠΎ text-align: center - ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰Π΅Π΅ Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

Для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ цСнтрирования Π»ΡƒΡ‡ΡˆΠΈΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΠΌ Π² соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, являСтся Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ display: table-cell; vertical-align: сСрСдина ΠΊ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρƒ. Π­Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Π½Π° Π±Π°Π·Π΅ Gecko, Opera 6+, Safari, IE8. Он оставляСт IE7 ΠΈ Π½ΠΈΠΆΠ΅ (ΠΊΠ°ΠΊ для Windows, Ρ‚Π°ΠΊ ΠΈ для Mac).

Для IE7 - идСя состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ своСго Ρ€ΠΎΠ΄Π° Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ, ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠΉ высоту, Ρ€Π°Π²Π½ΡƒΡŽ высотС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, ΠΈ снова ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ vertical-align: middle .Бвойство line-height нСльзя ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для этого, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΎ Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² IE7- / Win ΠΏΡ€ΠΈ Π½Π°Π»ΠΈΡ‡ΠΈΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π’Π°ΠΊΠΆΠ΅ использованиС большого Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π° (Π±Π΅Π· указания высоты строки) ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°Ρ‚ΠΈΡ‡Π½ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ высота сгСнСрированного Π±Π»ΠΎΠΊΠ° Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ большС, Ρ‡Π΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°. И IE5 / Mac (Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ IE / Win) ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ (ΠΏΠΎ Π²Ρ‹Π±ΠΎΡ€Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ), высоту строки ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°, Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½Π½Ρ‹Π΅ Π² пиксСлях, поэтому Ρƒ Π½Π΅Π³ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с этим ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠΌ, Ссли высота ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π½Π΅ Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½Π° Π² Π­ΠΌ.ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: этот ΠΆΠ΅ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ ΠΈΡΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΎΠ±Ρ‰Π΅Π΅ использованиС Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ цСнтрирования, основанного Π½Π° высотС строки, Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Π½Π° основС Gecko ΠΈ Safari.

К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, IE7- ΠΈΠΌΠ΅Π΅Ρ‚ (Ρ‡Π°ΡΡ‚ΠΈΡ‡Π½ΡƒΡŽ) ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ отобраТСния : встроСнный Π±Π»ΠΎΠΊ . Если Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° добавляСтся пустой встроСнный Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, span ) ΠΈ Π΅ΠΌΡƒ назначаСтся высота : 100%; vertical-align: middle , Ρ‚ΠΎ это позволяСт Ρ‚ΠΎΡ‡Π½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ: ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ с ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠΉ высотой. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, элСмСнт inline-block ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Π΅Ρ‚ Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΡƒΡŽ высоту (Ρ€Π°Π²Π½ΡƒΡŽ высотС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°) ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ линию ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠΉ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ vertical-align: middle (ΠΊΠ°ΠΊ Π½Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΌ элСмСнтС, Ρ‚Π°ΠΊ ΠΈ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ) Π΄Π°Π΅Ρ‚ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ .

НСкоторыС Π΄Π΅Ρ‚Π°Π»ΠΈ:

  • Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ пустой элСмСнт inline-block ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π½ΡƒΠ»Π΅Π²ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π² IE7- / Win, Π½ΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ : 1px Π² IE / Mac, ΠΈΠ½Π°Ρ‡Π΅ это Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ эффСкта смСщаСт Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° 1 пиксСль. Π­Ρ‚ΠΎΠΌΡƒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ поля -1 пиксСль, Π½ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π΅Π΄Π²Π° Π·Π°ΠΌΠ΅Ρ‚Π½Π°.)
  • Π’ IE5 / Mac Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ смСщСно Π½Π° нСсколько пиксСлСй. ИспользованиС нСбольшого Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈΠ»ΠΈ высоты строки Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ каТСтся ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ, Π½Π΅ понятно ΠΏΠΎΡ‡Π΅ΠΌΡƒ (IE5 / Mac здСсь Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ нСпослСдоватСлСн, особСнно ΠΏΡ€ΠΈ ΠΈΠ³Ρ€Π΅ с настройками Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°.)

ΠšΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰Π΅Π΅ display: table-cell ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ span с display: inline-block , Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Π½Π° Π±Π°Π·Π΅ Gecko, Opera 6+. Safari, IE5 + / Win, IE5 / Mac.

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚ этого ΠΌΠ΅Ρ‚ΠΎΠ΄Π° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ цСнтрирования Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта (Π΄Π°ΠΆΠ΅ с нСизвСстной высотой) Π²Π½ΡƒΡ‚Ρ€ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ (с извСстной высотой), Ρ‡Ρ‚ΠΎ являСтся Π±ΠΎΠ»Π΅Π΅ интСрСсной ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ.

Код

Π‘ΠΎΠ±ΠΈΡ€Π°Π΅ΠΌ всС вмСстС ΠΈ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌ "wraptocenter" классом ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, это ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ CSS.Код для IE / Mac Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ Π² подходящий Ρ„ΠΈΠ»ΡŒΡ‚Ρ€. Код для IE7- / Win ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½ Π² условныС ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ.

     

И это ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ HTML-ΠΊΠΎΠ΄

 
 ...

НСкоторыС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, ΠΎΠ½ΠΎ примСняСтся ΠΊ Π΄Π²ΡƒΠΌ изобраТСниям Ρ€Π°Π·Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ ΠΊ Π΄Π²ΡƒΠΌ Ρ€Π°Π·Π½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ². ΠŸΠ΅Ρ€Π²Ρ‹Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈΠΌΠ΅ΡŽΡ‚ Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π² пиксСлях, Π²Ρ‚ΠΎΡ€Ρ‹Π΅ - Π² ems. ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ„ΠΎΠ½ сСтки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.

НСкоторыС Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, Π³Π΄Π΅ изобраТСния содСрТат (ΠΊΡ€Π°ΡΠ½ΡƒΡŽ) сСтку, которая Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ со свСтло-сСрой сСткой Ρ„ΠΎΠ½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

Π”Ρ€ΡƒΠ³ΠΈΠ΅, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ слоТныС, ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹: изобраТСния Π² ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°Ρ…, галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с подписями.

Π‘Ρ‚Π°Ρ‚ΡŒΡ Π‘Ρ‚ΠΈΠ²Π° КлСя ΠΏΠΎ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ΅.

Π‘ΠΎΠ»ΡŒΡˆΠΎΠ΅ спасибо Инго Π§Π°ΠΎ Π·Π° Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ.

CSS tests home

Как Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ DIV с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Π’Π΅ΠΌΠ°: HTML / CSSPrev | Next

ΠžΡ‚Π²Π΅Ρ‚: Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ CSS

vertical-align Бвойство

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π²Π½ΡƒΡ‚Ρ€ΠΈ

, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство CSS vertical-align Π² сочСтании с display: table-cell; Π½Π° содСрТащСм элСмСнтС div.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ свойство поля CSS Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΊ display: table-cell; , поэтому ΠΌΡ‹ ΠΎΠ±Π΅Ρ€Π½ΡƒΠ»ΠΈ содСрТащий DIV Π΄Ρ€ΡƒΠ³ΠΎΠΉ DIV ( .outer-wrapper ) ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈ ΠΊ Π½Π΅ΠΌΡƒ ΠΌΠ°Ρ€ΠΆΡƒ. Π­Ρ‚ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π΄Π°ΠΆΠ΅ для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с большСй высотой, Ρ‡Π΅ΠΌ содСрТащиС DIV.

  



 Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ IMG Π² DIV с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS 
<ΡΡ‚ΠΈΠ»ΡŒ>
    .external-wrapper {
        дисплСй: встроСнный Π±Π»ΠΎΠΊ;
        ΠΌΠ°Ρ€ΠΆΠ°: 20 пиксСлСй;
    }
    .Π Π°ΠΌΠΊΠ°{
        ΡˆΠΈΡ€ΠΈΠ½Π°: 250 пиксСлСй;
        высота: 200 пиксСлСй;
        Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошной Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ 1px;
        Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ;
        Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: Ρ†Π΅Π½Ρ‚Ρ€;
        дисплСй: Ρ‚Π°Π±Π»ΠΈΡ†Π°-ячСйка;
    }
    img {
        максимальная ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
        максимальная высота: 100%;
        дисплСй: блок;
        ΠΌΠ°Ρ€ΠΆΠ°: 0 Π°Π²Ρ‚ΠΎ;
    }



    
    
 ΠšΠ»ΡƒΠ±Π½Π°Ρ ΠΊΠ°Ρ€Ρ‚Π°

Π›Π΅Ρ‚Π°ΡŽΡ‰ΠΈΠ΅ Π²ΠΎΠ·Π΄ΡƒΡˆΠ½Ρ‹Π΅ Π·ΠΌΠ΅ΠΈ

ΠžΠ±Π»Π°Ρ‡Π½ΠΎΠ΅ Π½Π΅Π±ΠΎ

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ позиционирования CSS для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ выравнивания изобраТСния Π²Π½ΡƒΡ‚Ρ€ΠΈ DIV.

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ это Π² основном Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚:

  



 Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ изобраТСния Π²Π½ΡƒΡ‚Ρ€ΠΈ DIV с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS 
<ΡΡ‚ΠΈΠ»ΡŒ>
    .Π Π°ΠΌΠΊΠ°{
        ΡˆΠΈΡ€ΠΈΠ½Π°: 250 пиксСлСй;
        высота: 200 пиксСлСй;
        ΠΌΠ°Ρ€ΠΆΠ°: 20 пиксСлСй;
        Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошной Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ 1px;
        ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅;
    }
    img {
        максимальная высота: 100%;
        максимальная ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
        позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
        Π²Π΅Ρ€Ρ…: 0;
        Π²Π½ΠΈΠ·Ρƒ: 0;
        слСва: 0;
        справа: 0;
        ΠΌΠ°Ρ€ΠΆΠ°: Π°Π²Ρ‚ΠΎ;
    }



    
    

Π›Π΅Ρ‚Π°ΡŽΡ‰ΠΈΠ΅ Π²ΠΎΠ·Π΄ΡƒΡˆΠ½Ρ‹Π΅ Π·ΠΌΠ΅ΠΈ

ΠžΠ±Π»Π°Ρ‡Π½ΠΎΠ΅ Π½Π΅Π±ΠΎ

БвязанныС вопросы ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹

Π’ΠΎΡ‚ Π΅Ρ‰Π΅ нСсколько часто Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡ‹Ρ… вопросов ΠΏΠΎ этой Ρ‚Π΅ΠΌΠ΅:

Как Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ изобраТСния Π½Π° вашСм сайтС

ΠšΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡ HTML ΠΈ CSS ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для Ρ‚ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΠΈ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ отобраТСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° вашСм Π²Π΅Π±-сайтС.ИмСя Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π·Π½Π°Π½ΠΈΠΉ ΠΈ экспСримСнтируя, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎ тСксту (ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌ элСмСнтам страницы) ΠΈΠ»ΠΈ ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ позволяСт тСксту ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒ - ΠΊΠ°ΠΊ Π²Ρ‹ это Π²ΠΈΠ΄Π΅Π»ΠΈ Π² Π³Π°Π·Π΅Ρ‚Π΅ ΠΈΠ»ΠΈ ΠΆΡƒΡ€Π½Π°Π»Π΅.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΌΡ‹ углубимся Π² ΠΊΠΎΠ΄, Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΊΡ€Π°Ρ‚ΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠΌ эти Ρ‚Π΅Ρ€ΠΌΠΈΠ½Ρ‹ позиционирования Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ.

  • Π’Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Π½Ρ‹Π΅ изобраТСния - ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ΠΎ ΠΏΠΎ тСксту, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ располоТСниС слСва, ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΈΠ»ΠΈ справа. ВСкст Π½Π΅ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½ (Π² Π²ΠΈΠ΄Π΅ Π±Π»ΠΎΠΊΠ°) Π΄ΠΎ ΠΈΠ»ΠΈ послС изобраТСния, Π² зависимости ΠΎΡ‚ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ выравнивания.
  • ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния - ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π΅, тСкст ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ достаточноС количСство ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ² Π²ΠΎΠΊΡ€ΡƒΠ³ изобраТСния. ΠŸΡ€Π°Π²ΠΈΠ»Π° с ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅ΠΉ запятой Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для размСщСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ряды, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚Π΅ Π² галСрСях ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ сСлСкторах ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€.

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ².

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ изобраТСния

Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ HTML-ΠΊΠΎΠ΄ для выравнивания изобраТСния ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ:

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ΠΎ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, Π° тСкст отобраТаСтся сразу справа ΠΎΡ‚ изобраТСния.

Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ этот HTML-ΠΊΠΎΠ΄, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ тСкста:

Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ

Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² тСкст, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ встроСно Π² Π°Π±Π·Π°Ρ†Ρ‹, Π½ΠΎ это Π½Π΅ самый Π»ΡƒΡ‡ΡˆΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚.

Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Π²Π΅Ρ€Ρ…Ρƒ ΠΈ Π½ΠΈΠ·Ρƒ

Наряду с Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ, ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΌΡƒ ΠΊΡ€Π°ΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ располоТСниС тСкста ΠΈ изобраТСния.

ΠŸΡ€ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ тСкст Sed feugiat tincidunt tellus выравниваСтся ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ ΠΊΡ€Π°ΡŽ изобраТСния.

ΠŸΡ€ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠΈ ΠΏΠΎ Π½ΠΈΠΆΠ½Π΅ΠΌΡƒ ΠΊΡ€Π°ΡŽ Ρ‚ΠΎΡ‚ ΠΆΠ΅ тСкст вмСсто этого выравниваСтся ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ Π½ΠΈΠΆΠ½Π΅ΠΌΡƒ ΡƒΠ³Π»Ρƒ изобраТСния.

Π₯отя Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ HTML ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ для основных ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², ΠΊΠΎΠ΄ довольно Π½Π΅Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΈ довольно ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΉ. ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния с ΠΊΠΎΠ΄ΠΎΠΌ CSS - Π±ΠΎΠ»Π΅Π΅ соврСмСнный ΠΈ, ΠΊΠ°ΠΊ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄.

ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния

ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния справа с пСрСносом тСкста

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Ρ‚Π΅Π³ изобраТСния Π² наш HTML-Ρ„Π°ΠΉΠ», Π½ΠΎ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΠ΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° (Β«hpΒ»).

Код форматирования вызываСтся ΠΈΠ· ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ float: right , плюс Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π», любСзно прСдоставлСнный ΠΏΡ€Π°Π²ΠΈΠ»ΠΎΠΌ margin .

 #hp {
float: right;
 ΠΌΠ°Ρ€ΠΆΠ°: 0 0 0 15 пиксСлСй;
} 

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ²ΡˆΠΈΠΉΡΡ ΠΌΠ°ΠΊΠ΅Ρ‚ стал Π±ΠΎΠ»Π΅Π΅ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½Ρ‹ΠΌ, с ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ΠΌ тСкста ΠΏΠΎΠ΄ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.

ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния слСва с пСрСносом тСкста

Если ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½ΠΎ Π² Ρ„Π°ΠΉΠ»Π΅ HTML, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ.

 #hp {
ΠΏΠ»Ρ‹Ρ‚ΡŒ Π½Π°Π»Π΅Π²ΠΎ;
 ΠΌΠ°Ρ€ΠΆΠ°: 0 15px 0 0;
} 

Π‘Π΅Π· ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠ°

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ float: none , Ρ‡Ρ‚ΠΎΠ±Ρ‹ просто ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚Π°ΠΌ, Π³Π΄Π΅ ΠΎΠ½ΠΎ ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½ΠΎ Π² тСкст, Π±Π΅Π· ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ пСрСноса. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ поля (ΠΏΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ) для ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°.

 #hp {
float: Π½Π΅Ρ‚;
 ΠΌΠ°Ρ€ΠΆΠ°: 0 15px 0 0;
} 

Поплавки ΠΊΠ»ΠΈΡ€ΠΈΠ½Π³ΠΎΠ²Ρ‹Π΅

Одно Π²Π°ΠΆΠ½ΠΎΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΌ изобраТСниям - это ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ использованиС ΠΏΡ€Π°Π²ΠΈΠ»Π° очистки.ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния (ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π²Π΅Π±-элСмСнты) Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°, Ссли Π²Ρ‹ Π½Π΅ очиститС ΠΈΡ…. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ очистки послС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΠ»Π°Π²Π°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρƒ нас Π΅ΡΡ‚ΡŒ Π΄Π²Π° Ρ€Π°Π·Π΄Π΅Π»Π° (с использованиСм Ρ‚Π΅Π³ΠΎΠ² div ), ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… содСрТит ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ - ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, тСкст ΠΈ ΠΊΡ€Π°ΡΠ½ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Ρ€Π°Π·Π΄Π΅Π» позиционируСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΡ€Π°Π²ΠΈΠ»Π° float: left, ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ Π²Ρ‚ΠΎΡ€ΠΎΠΉ Ρ€Π°Π·Π΄Π΅Π».

ΠŸΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ происходит ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π½Π΅ использовали Ρ‡Π΅Ρ‚ΠΊΠΎΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ.ΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ CSS ΠΊΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌΡƒ div:

 .div2 {
Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошной красный 1px;
ясно: оба;
} 

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π΄Π²Π° Ρ€Π°Π·Π΄Π΅Π»Π° большС Π½Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ. ΠŸΡ€Π°Π²ΠΈΠ»ΠΎ clear ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ с рядом Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ:

  • Π½Π΅Ρ‚ - позволяСт ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнты с ΠΎΠ±Π΅ΠΈΡ… сторон.
  • слСва - с Π»Π΅Π²ΠΎΠΉ стороны Π½Π΅ Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнты.
  • справа - с ΠΏΡ€Π°Π²ΠΎΠΉ стороны Π½Π΅ Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнты.
  • ΠΎΠ±Π° - ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнты Π½Π΅ Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ с ΠΎΠ±Π΅ΠΈΡ… сторон.
  • наслСдуСт - наслСдуСт чистоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ своСго родитСля.

ΠŸΠΎΡ‚Ρ€Π°Ρ‚ΡŒΡ‚Π΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° экспСримСнты с ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ CSS, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ float ΠΈ clear , ΠΈ скоро Π²Ρ‹ освоитС Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ страниц.

Если Ρƒ вас Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ вопросы ΠΈΠ»ΠΈ Π²Π°ΠΌ потрСбуСтся ΠΏΠΎΠΌΠΎΡ‰ΡŒ, ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ заявку Π² слуТбу ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов HostPapa. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΏΠΎ этой ссылкС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ.

Как Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³Π° привязки?

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ изобраТСния Π² привязкС

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ изобраТСния Π²Π½ΡƒΡ‚Ρ€ΠΈ привязки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS, ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:.ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π° {высота строки: 150 пиксСлСй; // высота взята ΠΈΠ· ΠΏΠ»ΡƒΠ½ΠΆΠ΅Ρ€Π° OP}. thumbnail img {margin: auto; Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ; дисплСй: встроСнный Π±Π»ΠΎΠΊ; }. Π― Ρ…ΠΎΡ‡Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ тСкст элСмСнта привязки Π±Ρ‹Π»ΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. Π― ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π» Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ (css), отступы, поля ΠΈ Ρ‚. Π”., Но ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ выровняСтся ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ с тСкстом. html css

[РСшСно] Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ изобраТСния Π² ссылкС, Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, ΠΈ Ρƒ мСня Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹. Π£ мСня Π΅ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ‚Π΅Π³Π΅ привязки для Ρ‚ΠΈΠΏΠΈΡ‡Π½ΠΎΠ³ΠΎ изобраТСния Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°.Мой Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ RE: Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ изобраТСния Π² Ρ‚Π΅Π³Π΅ привязки darryncooke (TechnicalUser) 3 сСн 09, 03:17 прСдполагая, Ρ‡Ρ‚ΠΎ содСрТимоС ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ‚ΠΎΠ³Π΄Π° просто установка вашСго div Π½Π° Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Ρ€ΡŽΠΊ.

Π‘Ρ‚ΠΈΠ»ΡŒ элСмСнта HTML Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, ΠœΡ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π±Ρ‹ Π·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ привязки Π²Π½ΡƒΡ‚Ρ€ΠΈ div. ΠžΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ. Π£ мСня Π΅ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ‚Π΅Π³Π΅ привязки для Ρ‚ΠΈΠΏΠΈΡ‡Π½ΠΎΠ³ΠΎ изобраТСния Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. Мой Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ‚ высоту 100 пиксСлСй, ΠΈ я Ρ…ΠΎΡ‡Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ страница Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π»Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Π΅Π· нСобходимости ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ пиксСли для Π΅Π³ΠΎ Ρ‚ΠΎΡ‡Π½ΠΎΠ³ΠΎ позиционирования.ΠžΠ±Ρ‹Ρ‡Π½ΠΎ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ для этого vertical-align: middle, Π½ΠΎ Π½Π΅ ΠΌΠΎΠ³Ρƒ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.

Как Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ тСкст ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ‚Π΅Π³Π΅ привязки

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ изобраТСния Π²Π½ΡƒΡ‚Ρ€ΠΈ привязки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS, Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ, Π½ΠΎ для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ всС Π΅Ρ‰Π΅ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚. ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ. УстановитС высоту строки Ρ‚Π΅Π³Π° привязки, Ρ€Π°Π²Π½ΡƒΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ ΡˆΡ€ΠΈΡ„Ρ‚Π° тСкста "span". ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, vertical-align: bottom. Π Π•Π”ΠΠšΠ’Π˜Π ΠžΠ’ΠΠ’Π¬: ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Β«vertical-align: bottomΒ» вмСсто Β«vertical-align: text-bottomΒ». ΠžΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с этими Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°ΠΌΠΈ ΠΎΡ‚ w3schools Π² спСцификации "vertical-align".(Π½Π΅ связано с w3c) Π Π•Π”ΠΠšΠ’Π˜Π ΠžΠ’ΠΠ’Π¬: Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ высоту строки вашСго "Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°" тСкста Ρ€Π°Π²Π½ΠΎΠΉ

[РСшСно] Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ изобраТСния Π² ссылкС, Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, ΠΈ Ρƒ мСня Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹. Π£ мСня Π΅ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ‚Π΅Π³Π΅ привязки для Ρ‚ΠΈΠΏΠΈΡ‡Π½ΠΎΠ³ΠΎ изобраТСния Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. Для обСспСчСния доступности ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° чтСния с экрана Π±ΡƒΠ΄Π΅Ρ‚ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ любой тСкст Π² ссылкС (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Β«Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ Π½Π° домашнСй страницС ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²Π½ΡƒΡ‚Ρ€ΠΈ, Π½ΠΎ я Ρ…ΠΎΡ‡Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст располагался Π² сСрСдинС Ρ‚Π΅Π³Π°, Π° я просто Π½Π΅ ΠΌΠΎΠ³Ρƒ этого ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ.По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΎΠ½ находится Π½Π°Π²Π΅Ρ€Ρ…Ρƒ. Π― ΠΏΡ€ΠΎΠ±ΡƒΡŽ vertical-align: middle, Π½ΠΎ это Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

Π’Π΅Π³ привязки ΠΈ изобраТСния ΠΊΠ°ΠΊ ссылки Π² HTML5, HTML-ΠΊΠΎΠ΄ для Ρ‚Π΅Π³Π° привязки ΠΈ изобраТСния ΠΊΠ°ΠΊ ссылки. Π£Ρ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½Π½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ выравнивания text Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ изобраТСния ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² Π°Π±Π·Π°Ρ†Π°Ρ… ΠΈΠ»ΠΈ списках ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ…, ΠΊΠ°ΠΊ Π² дСмонстрации эскизов Π²Ρ‹ΡˆΠ΅. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π²Π΅Π±-страницы. ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ попугая Π² iframe Π²Ρ‹ΡˆΠ΅.

Css Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ изобраТСния Π² Ρ‚Π΅Π³Π΅

Vertical Align Π‘Ρ€Π΅Π΄Π½Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ‚Π΅Π³Π΅ a Π² div, Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ встроСнныС элСмСнты.Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с Π±Π»ΠΎΠΊΠΎΠΌ display: Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Ρ‚Ρ€ΠΎΠ½ΡƒΡ‚ΠΎ объявлСниСм Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ выравнивания. Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: Ρ†Π΅Π½Ρ‚Ρ€; Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ; дисплСй: Ρ‚Π°Π±Π»ΠΈΡ†Π°-ячСйка; ΠΊ ΡΡ‚ΠΈΠ»ΡŽ div. Как Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ div Π― ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ vertical-align Π² div, Π° Π½Π΅ Π½Π° img, хотя ΠΌΠΎΠΉ img находится Π²Π½ΡƒΡ‚Ρ€ΠΈ привязки (

Как Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML - ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° HTML-страницС ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π΅ΡˆΠ°ΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для ΠΌΠ°ΠΊΠ΅Ρ‚Π° страницы.Для этого я использовал свойство text-align: center; CSS.Бвойства CSS align-content align-items align-self all animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ animation-play-state анимация-Ρ‚Π°ΠΉΠΌΠΈΠ½Π³-функция backface-visibility background background -attachment background-blend-mode background-clip background-color

[РСшСно] Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ изобраТСния Π² ссылкС, Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, ΠΈ Ρƒ мСня Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹. Π£ мСня Π΅ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ‚Π΅Π³Π΅ привязки для Ρ‚ΠΈΠΏΠΈΡ‡Π½ΠΎΠ³ΠΎ изобраТСния Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°.Мой Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ИспользованиС CSS для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ выравнивания ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с тСкстом. Если Π²Ρ‹ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ ΠΏΡ‹Ρ‚Π°Π»ΠΈΡΡŒ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ строки тСкста, эти инструкции Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ. Π― Π΄ΠΎΠ±Π°Π²ΠΈΠ» Ρ€Π°ΠΌΠΊΡƒ Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· этих ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Π»ΠΎ Π»Π΅Π³Ρ‡Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ тСкст совпадаСт с изобраТСниями, ΠΈ ΠΎΡ‚Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΎΡ‚ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ содСрТимого Π½Π° этой страницС.

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ img Π² div

Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΈ сСрСдинС Π²Π½ΡƒΡ‚Ρ€ΠΈ div, DOCTYPE html> Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ выравнивания тСкста Π ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт Π±Π»ΠΎΠΊΠ° -> <noscript><img class="lazy lazy-hidden" src = "user .png "alt =" John Doe "></noscript><img class="lazyload lazy lazy-hidden" src = "user .png "alt =" John Doe "><noscript><img src = "user .png "alt =" John Doe "></noscript></div> Π‘ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ΠΌ Π΄ΠΎ Ρ†Π΅Π½Ρ‚Ρ€Π° изобраТСния (ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ заполняСт div): div {display: block; overflow: hidden; width: 70px; height: 70px; position: relative; } div img {min-width: 70px; min-height: 70px; max-width: 250%; max-height: 250%; top: -50%; left: -50%; bottom: -50%; right: -50%; position: absolute;}</p><p> <b> Как Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Text Align: Center, </b> ΠžΠ±Ρ‹Ρ‡Π½ΠΎΠΉ Π·Π°Π΄Π°Ρ‡Π΅ΠΉ CSS являСтся Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ тСкста ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.На самом Π΄Π΅Π»Π΅ ΠΈΡ… Ρ‚Ρ€ΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: IMG.отобраТаСтся {display: block; ΠΌΠ°Ρ€ΠΆΠ° слСва: Π°Π²Ρ‚ΠΎ; margin-right: auto} <noscript><img class="lazy lazy-hidden" src = "" alt = ""></noscript><img class="lazyload lazy lazy-hidden" src = "" alt = ""><noscript><IMG src = "" alt = ""></noscript> ΠΈ высотой с ΠΎΠΊΠ½ΠΎ. DIV. ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ {min-height: 10em; дисплСй: Ρ‚Π°Π±Π»ΠΈΡ†Π°-ячСйка; Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅: срСдний}. Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π²Π½ΡƒΡ‚Ρ€ΠΈ Div. Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта div, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство CSS выравнивания тСкста с Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠΌ Π² качСствС Π΅Π³ΠΎ значСния. Π—Π΄Π΅ΡΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ имя класса для элСмСнта div. ПослС этого Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π² качСствС значСния ΠΊ CSS класса элСмСнта div.</p><p> <b> ΠœΠ°ΠΊΠ΅Ρ‚ CSS - Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅, </b> Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ элСмСнта Div. Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ ΠΊΠΎΠ΄. <! DOCTYPE html><html><head> <br/></head> <br/><body> <br/><p> Π­Ρ‚Π° строка ΠΈΠΌΠ΅Π΅Ρ‚ ΡΡ‚ΠΈΠ»ΡŒ <br/> <code> text-align: center; </code>.<br/> Lorem ipsum dolor sit amet, conctetuer adipiscing elit. <br/> Phasellus eleifend. In hac Habitasse platea dictumst. Vestibulum in <br/> Tortor ut orci Pretium Bibendum.</p></p><p><p> Π­Ρ‚Π° строка ΠΈΠΌΠ΅Π΅Ρ‚ ΡΡ‚ΠΈΠ»ΡŒ <br/> <code> margin-left: auto; margin-right: auto; </code>. <br/> Lorem ipsum dolor sit amet, conctetuer adipiscing elit. <br/> Phasellus eleifend. In hac Habitasse platea dictumst. ВСстибулум Π² <br/> toror ut orci pretium bibendum.</p> <br/></body> <br/></html></p><p> - <br/> Lachlan Hunt <br/> http: // lachy.id.au/ <br/> http://GetFirefox.com/ ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ для сСбя Π·Π°Π½ΠΎΠ²ΠΎ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ <br/> http://SpreadFirefox.com/ ЗаТигая Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ <br/></p><h4><span class="ez-toc-section" id="i-38"> Π­Ρ‚Π° Π²Π΅Ρ‚ΠΊΠ° обсуТдСния Π·Π°ΠΊΡ€Ρ‹Ρ‚Π° </span></h4><p> ΠžΡ‚Π²Π΅Ρ‚Ρ‹ Π½Π° это обсуТдСниС ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹.</p></td></table><h2><span class="ez-toc-section" id="8_Bootstrap_4"> 8 ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ выравнивания тСкста Π² Bootstrap 4: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, справа ΠΈ Π΄Ρ€. </span></h2><p> Bootstrap 4 ΠΈΠΌΠ΅Π΅Ρ‚ встроСнныС классы для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ тСкста ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΈ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, Π° Ρ‚Π°ΠΊΠΆΠ΅ с вСсом тСкста (ΠΏΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ), пСрСносом, ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ, ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ курсивом.</p><p> Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ я ΠΏΠΎΠΊΠ°ΠΆΡƒ Π²Π°ΠΌ ΠΆΠΈΠ²Ρ‹Π΅ дСмонстрации выравнивания тСкста ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, справа ΠΈ слСва. Π― Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΊΠ°ΠΆΡƒ Π²Π°ΠΌ использованиС Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… классов float вмСстС с классами выравнивания тСкста для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.</p><h4></h4><strong> ΠŸΡ€ΠΈΠΌΠ΅Ρ€ тСкста Ρ†Π΅Π½Ρ‚Ρ€Π° Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ </strong></h4><p> Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ тСкст ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ класс <strong> <em> .text-center </em> </strong>. Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ этот класс примСняСтся ΠΊ Π°Π±Π·Π°Ρ†Ρƒ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌ ΠΎΡ‚ h2 Π΄ΠΎ h6, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст Π±Ρ‹Π» Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ:</p><p></p><h6></h6><strong> Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄ </strong></h6><p> <strong> Π’ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅: </strong> <br/></p><table><tr><td data-settings="show"></td><td><p><p> Класс text-center для выравнивания тСкста ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π°Π±Π·Π°Ρ†Π°!</p></p><p></p><p><h2><span class="ez-toc-section" id="_1-2"> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ тСкст ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ 1! </span></h2></p><p></p><p><h3><span class="ez-toc-section" id="_2-2"> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ тСкст ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ 2 ! </span></h3></p><p></p><p><h4><span class="ez-toc-section" id="_3-2"> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ тСкст Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ 3! </span></h4></p><p></p><p><h5><span class="ez-toc-section" id="_4-2"> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ тСкст Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ 4! </span></h5></p><p></p><p><h5><span class="ez-toc-section" id="_5"> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ тСкст Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ 5! </span></h5></p><p></p><p><h6><span class="ez-toc-section" id="_6"> Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ тСкст Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ 6! </span></h6></p></td></tr></table><h4></h4><strong> ΠŸΡ€ΠΈΠΌΠ΅Ρ€ выравнивания тСкста ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ </strong></h4><p> Для выравнивания тСкста ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ <em> <strong>.text-right </strong> </em> класс Π² элСмСнтС. Как ΠΈ Π² ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, я ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ» класс .text-right ΠΊ Π°Π±Π·Π°Ρ†Ρƒ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ h2 ΠΊ h6 для дСмонстрации:</p><p></p><h6></h6><strong> Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄ </strong></h6><p> <strong> Код для выравнивания справа, ΠΏΡ€ΠΈΠΌΠ΅Ρ€ </strong> <br/></p><table><tr><td data-settings="show"></td><td><p><p> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΏΠΎ классу тСкста ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² Π°Π±Π·Π°Ρ†Π΅</p></p><p></p><p><h2><span class="ez-toc-section" id="_h2"> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΏΠΎ h2! </span></h2></p><p></p><p><h3><span class="ez-toc-section" id="_h3"> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΏΠΎ h3! </span></h3></ H3 ></p><p></p><p><h4><span class="ez-toc-section" id="_h2-2"> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π²ΠΏΡ€Π°Π²ΠΎ Π² h2! </span></h4></p><p></p><p><h5><span class="ez-toc-section" id="_h2-3"> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π²ΠΏΡ€Π°Π²ΠΎ Π² h2! </span></h5></p><p></p><p><h5><span class="ez-toc-section" id="_h2-4"> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π²ΠΏΡ€Π°Π²ΠΎ Π² h2! </span></h5></p><p></p><p><h6><span class="ez-toc-section" id="_h2-5"> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π²ΠΏΡ€Π°Π²ΠΎ ΠΏΠΎ h2! </span></h6></p></td></tr></table><h4></h4><strong> ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования класса text-left </strong></h4><p> Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ <strong> <em>.text-left </em> </strong> класс для выравнивания тСкста ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ. Π­Ρ‚ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, примСняСмоС Π² тСкстС. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ, я использовал Π°Π±Π·Π°Ρ†Ρ‹ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ с классом .text-left ΠΈ Π±Π΅Π· Π½Π΅Π³ΠΎ.</p><p> ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π½Π° Π²Ρ‹Π²ΠΎΠ΄ ΠΈ ΠΊΠΎΠ΄, посСтив Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ страницу:</p><h6></h6><strong> Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄ </strong></h6><p> <strong> Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° для использования класса text-left: </strong> <br/></p><table><tr><td data-settings="show"></td><td><p><p> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΏΠΎ классу тСкста ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² Π°Π±Π·Π°Ρ†Π΅</p></p><p></p><p><h2><span class="ez-toc-section" id="_h2-6"> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΏΠΎ h2! </span></h2></p><p></p><p><h3><span class="ez-toc-section" id="_h3-2"> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΏΠΎ h3! </span></h3></ H3 ></p><p></p><p><h4><span class="ez-toc-section" id="_h2-7"> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΏΠΎ h2! </span></h4></p><p></p><p><h5><span class="ez-toc-section" id="_h2-8"> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΏΠΎ h2! </span></h5></p><p></p><p><h5><span class="ez-toc-section" id="_h2-9"> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΏΠΎ h2! </span></h5></p><p></p><p><h6><span class="ez-toc-section" id="_h2-10"> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² h2! </span></h6></p></td></tr></table><h4></h4><strong> Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста с ΠΎΠΊΠ½Π°ΠΌΠΈ просмотра </strong></h4><p> Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст Π±Ρ‹Π» Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΈΠ»ΠΈ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ для Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΈΠ»ΠΈ ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… устройств, Π² частности, Π² соотвСтствии с ΠΎΠΊΠ½Π°ΠΌΠΈ просмотра, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойство text-align, ΠΊΠ°ΠΊ описано Π½ΠΈΠΆΠ΅ с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ.</p><p> Для выравнивания тСкста ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Π±ΠΎΠ»ΡŒΡˆΠΈΡ… устройствах ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ класс <strong> <em> text-lg-center </em> </strong>. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ это, скопируйтС ΠΊΠΎΠ΄ со страницы ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π² вашСм Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΠΈ запуститС ΠΊΠΎΠ΄. Π’Π΅ΠΏΠ΅Ρ€ΡŒ посмотритС Π½Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана <em> <strong>> = 1200 пиксСлСй </strong> </em> ΠΈ Π² малСньком Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΎΠ½ мСняСт своС Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅:</p><h6></h6><strong> Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄ </strong></h6><p> <strong> Код: </strong> <br/></p><table><tr><td data-settings="show"></td><td><p><div></p><p></p><p><h4><span class="ez-toc-section" id="_Bootstrap_4"> ДСмонстрация выравнивания тСкста Π² Bootstrap 4 </span></h4></p><p></p><p><p> Π’Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π² большом ΠΎΠΊΠ½Π΅ просмотра ΠΈ слСва Π² ΠΌΠ°Π»Ρ‹Ρ… ΠΎΠΊΠ½Π°Ρ… просмотра</p></p><p></p><p><h2 ><span class="ez-toc-section" id="h2"> h2: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π½Π° большом экранС ΠΈ слСва Π² срСднСм / мСньшСм </span></h2></p><p></p><p><h5><span class="ez-toc-section" id="h5"> h5: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π½Π° большом экранС ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π² срСднСм / мСньшСм </span></h5></p><p></p><p><h5><span class="ez-toc-section" id="h5-2"> h5: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π½Π° большом экранС ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π² срСднСм / мСньшСм </span></h5></p><p></p><p><h6><span class="ez-toc-section" id="h6"> h6: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π½Π° большом экранС ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π² срСднСм / мСньшСм </span></h6></p><p></p><p></div></p></td></tr></table><h4></h4><strong> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Ρ†Π΅Π½Ρ‚Ρ€ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² срСдних ΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΎΠΊΠ½Π°Ρ… просмотра </strong></h4><p> Для выравнивания тСкста ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² срСдних ΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Π²ΠΈΠ΄ΠΎΠ²Ρ‹Ρ… экранах ΠΈ выравнивания ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ Π² ΠΌΠ°Π»Ρ‹Ρ… Π²ΠΈΠ΄ΠΎΠ²Ρ‹Ρ… экранах ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ <strong> <em>.text-md-center </em> </strong> класс Π² Ρ‚Π°ΠΊΠΈΡ… элСмСнтах, ΠΊΠ°ΠΊ<p>,<h2><span class="ez-toc-section" id="i-39">, </span></h2><h3><span class="ez-toc-section" id="i-40"> ΠΈ Ρ‚. Π΄. </span></h3></p><p> ВзглянитС Π½Π° использованиС ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ экрана:</p><h6></h6><strong> Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄ </strong></h6><p> <strong> Код: </strong> <br/></p><table><tr><td data-settings="show"></td><td><p><div></p><p></p><p><h4><span class="ez-toc-section" id="_text-md-center"> ДСмонстрация класса text-md-center </span></h4></p><p></p><p><p> Π’Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π² срСдних / Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΎΠΊΠ½Π°Ρ… просмотра ΠΈ слСва Π² ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… ΠΎΠΊΠ½Π°Ρ… просмотра</p></p><p></p><p><h2><span class="ez-toc-section" id="h2-2"> h2: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π½Π° срСднСм / большом экранС ΠΈ слСва Π½Π° мСньшСм </span></h2></p><p></p><p><h5><span class="ez-toc-section" id="h5-3"> h5: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π½Π° срСднСм / большом экранС ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π½Π° мСньшСм </span></h5></p><p></p><p><h5><span class="ez-toc-section" id="h5-4"> h5: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π½Π° срСднСм / большом экранС ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π½Π° мСньшСм </span></h5></p><p></p><p><h6><span class="ez-toc-section" id="h6-2"> h6: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π½Π° срСднСм / большом экранС ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π½Π° мСньшСм </span></h6></p><p></p><p></div></p></td></tr></table><h4></h4><strong> ДСмонстрация класса text-sm-center </strong></h4><p> Для выравнивания тСкста ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π½Π° всСх устройствах / Π²ΡŒΡŽΠΏΠΎΡ€Ρ‚Π°Ρ…, ΠΊΡ€ΠΎΠΌΠ΅ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ°Π»Ρ‹Ρ… (ΠΌΠ΅Π½Π΅Π΅ 576 пиксСлСй), ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ класс <strong> <em> text-sm-center </em> </strong>.Π”Π΅ΠΌΠΎ-ΠΊΠΎΠ΄ ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½ΠΈΠΆΠ΅:</p><h6></h6><strong> Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄ </strong></h6><p> <strong> Код, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ стоит ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ: </strong> <br/></p><table><tr><td data-settings="show"></td><td><p><div></p><p></p><p><h4><span class="ez-toc-section" id="_text-sm-center"> ДСмонстрация класса text-sm-center </span></h4></p><p></p><p><p> Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Ρ†Π΅Π½Ρ‚Ρ€ Π² ΠΌΠ°Π»Ρ‹Ρ… / срСдних / Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΎΠΊΠ½Π°Ρ… просмотра, ΠΊΡ€ΠΎΠΌΠ΅ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ…</p></p><p></p><p><h2><span class="ez-toc-section" id="h2-3"> h2: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ малСнький / срСдний / большой, ΠΊΡ€ΠΎΠΌΠ΅ ΠΎΡ‡Π΅Π½ΡŒ малСнького </span></h2></p><p></p><p><h5><span class="ez-toc-section" id="h5-5"> h5: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΌΠ°Π»Ρ‹ΠΉ / срСдний / большой, ΠΊΡ€ΠΎΠΌΠ΅ ΠΎΡ‡Π΅Π½ΡŒ малСнького </span></h5></p><p></p><p><h5><span class="ez-toc-section" id="h5-6"> h5: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π² ΠΌΠ°Π»ΠΎΠΌ / срСднСм / большом, ΠΊΡ€ΠΎΠΌΠ΅ ΠΎΡ‡Π΅Π½ΡŒ малСнького </span></h5></p><p></p><p><h6><span class="ez-toc-section" id="h6-3"> h6: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π² малСньком / срСднСм / большом, ΠΊΡ€ΠΎΠΌΠ΅ свСрхмалого </span></h6></p><p></p><p></div></p></td></tr></table><h4></h4><strong> ИспользованиС классов тСкстовой сСтки для выравнивания ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΈ Π»Π΅Π²ΠΎΠΌΡƒ краям </strong></h4><p> Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅ Bootstrap 4 ΠΈΠΌΠ΅Π΅Ρ‚ встроСнныС классы для выравнивания ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΈΠ»ΠΈ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ (Π² частности) для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… экранов / Π²ΠΈΠ΄ΠΎΠ²Ρ‹Ρ… экранов.Доступны ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ классы:</p><p> <strong> Для выравнивания ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ: </strong></p><ul><li> тСкст-см-Π²ΠΏΡ€Π°Π²ΠΎ</li><li> тСкст-ΠΌΠΊΡ€-справа</li><li> тСкст-LG-справа</li></ul><p> <strong> Для выравнивания ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ: </strong></p><ul><li> тСкст-см-слСва</li><li> тСкст-MD-слСва</li><li> тСкст-lg-слСва</li></ul><h4></h4><strong> Π¦Π΅Π½Ρ‚Ρ€Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ изобраТСния ΠΏΠΎ классу text-center </strong></h4><p> Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ .text-center ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ классы тСкста для выравнивания тСкста, Π½ΠΎ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π΄Π²Π° изобраТСния Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ с использованиСм классов выравнивания тСкста Bootstrap 4 ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:</p><p></p><h6></h6><strong> Π‘ΠΌ. Онлайн-Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ ΠΊΠΎΠ΄ </strong></h6><p> <strong> Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΏΠΎ классам тСкста: </strong> <br/></p><table><tr><td data-settings="show"></td><td><p><div></p><p></p><p> <noscript><img src = "images / donut.</div></noscript><img class="lazyload" src = "images / donut.</div></div></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация ΠΏΠΎ записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/kak-otpravlyat-pisma-po-elektronnoj-pochte-poddelka-pisma-elektronnoj-pochty-pochti-ot-lyubogo-cheloveka-menee-chem-za-5-minut-i-sposoby-zashhity.html" rel="prev">Как ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ письма ΠΏΠΎ элСктронной ΠΏΠΎΡ‡Ρ‚Π΅ – ПоддСлка письма элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ ΠΏΠΎΡ‡Ρ‚ΠΈ ΠΎΡ‚ любого Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ° ΠΌΠ΅Π½Π΅Π΅ Ρ‡Π΅ΠΌ Π·Π° 5 ΠΌΠΈΠ½ΡƒΡ‚ ΠΈ способы Π·Π°Ρ‰ΠΈΡ‚Ρ‹</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/kopirajter-chto-eto-za-rabota-eto-professiya-s-chego-nachat-chem-zanimaetsya-chto-eto-takoe-skolko-v-mesyac-zarabatyvaet-gde-uchitsya-navyki-obrazovanie.html" rel="next">ΠšΠΎΠΏΠΈΡ€Π°ΠΉΡ‚Π΅Ρ€ Ρ‡Ρ‚ΠΎ это Π·Π° Ρ€Π°Π±ΠΎΡ‚Π° – это: профСссия, с Ρ‡Π΅Π³ΠΎ Π½Π°Ρ‡Π°Ρ‚ΡŒ, Ρ‡Π΅ΠΌ занимаСтся, Ρ‡Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅, сколько Π² мСсяц Π·Π°Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚, Π³Π΄Π΅ ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ, Π½Π°Π²Ρ‹ΠΊΠΈ, ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/kak-vyrovnyat-izobrazhenie-po-czentru-v-html-kak-vyrovnyat-fotografiyu-po-czentru-veb-straniczy.html#respond" style="display:none;">ΠžΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½.</span> <span class="required-field-message">ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Π‘Π°ΠΉΡ‚</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ" /> <input type='hidden' name='comment_post_ID' value='20449' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div><div id="sidebar-primary" class="widget-area sidebar " role="complementary"><div class="sidebar-main"><div id="yandex_rtb_R-A-744004-7" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript"> window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo: "yandex_rtb_R-A-744004-7",blockId: "R-A-744004-7",pageNumber: 11,onError: (data) => { var g = document.createElement("ins"); g.className = "adsbygoogle"; g.style.display = "inline"; g.style.width = "300px"; g.style.height = "600px"; g.setAttribute("data-ad-slot", "9935184599"); g.setAttribute("data-ad-client", "ca-pub-1812626643144578"); g.setAttribute("data-alternate-ad-url", "https://chajnov.ru/back.php"); document.getElementById("yandex_rtb_[rtbBlock]").appendChild(g); (adsbygoogle = window.adsbygoogle || []).push({}); }})}); window.addEventListener("load", () => { var ins = document.getElementById("yandex_rtb_R-A-744004-7"); if (ins.clientHeightΒ == "0") { ins.innerHTML = stroke2; } }, true); </script><section id="search-2" class="widget widget_search"><div class="zita-widget-content"><form role="search" method="get" id="searchform" action="https://xn--90abhccf7b.xn--p1ai/"><div class="form-content"> <input type="text" placeholder="search.." name="s" id="s" value=""/> <input type="submit" value="Search" /></div></form></div></section><section id="nav_menu-4" class="widget widget_nav_menu"><div class="zita-widget-content"><h2 class="widget-title">Π ΡƒΠ±Ρ€ΠΈΠΊΠΈ</h2><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-19021" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19021"><a href="https://xn--90abhccf7b.xn--p1ai/category/css">Css</a></li><li id="menu-item-19022" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-19022"><a href="https://xn--90abhccf7b.xn--p1ai/category/html">Html</a></li><li id="menu-item-19023" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19023"><a href="https://xn--90abhccf7b.xn--p1ai/category/js">Js</a></li><li id="menu-item-19024" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19024"><a href="https://xn--90abhccf7b.xn--p1ai/category/adaptiv">Адаптивный сайт</a></li><li id="menu-item-19025" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19025"><a href="https://xn--90abhccf7b.xn--p1ai/category/verstk">ВСрстка</a></li><li id="menu-item-19026" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19026"><a href="https://xn--90abhccf7b.xn--p1ai/category/idei">ИдСи</a></li><li id="menu-item-19028" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19028"><a href="https://xn--90abhccf7b.xn--p1ai/category/chego-nachat">Π‘ Ρ‡Π΅Π³ΠΎ Π½Π°Ρ‡Π°Ρ‚ΡŒ</a></li><li id="menu-item-19029" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19029"><a href="https://xn--90abhccf7b.xn--p1ai/category/sovety">Π‘ΠΎΠ²Π΅Ρ‚Ρ‹</a></li><li id="menu-item-19031" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19031"><a href="https://xn--90abhccf7b.xn--p1ai/category/shablon">Π¨Π°Π±Π»ΠΎΠ½Ρ‹</a></li><li id="menu-item-19027" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19027"><a href="https://xn--90abhccf7b.xn--p1ai/category/raznoe">Π Π°Π·Π½ΠΎΠ΅</a></li></ul></div></div></section></div></div></div></div><footer id="zita-footer"><div class="footer-wrap widget-area"><div class="bottom-footer"><div class="bottom-footer-bar ft-btm-one"><div class="container"><div class="bottom-footer-container"> Β© Компания <a href="http://Π²Π΅Π±Π΄ΠΆΠ΅ΠΌ.Ρ€Ρ„"> Π’Π΅Π±Π΄ΠΆΠ΅ΠΌ.Ρ€Ρ„ </a> 2009 - 2025 | ВсС ΠΏΡ€Π°Π²Π° Π·Π°Ρ‰ΠΈΡ‰Π΅Π½Ρ‹.</a></div></div></div></div></div></footer> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --></body></html>