{"id":18172,"date":"2023-04-06T00:00:00","date_gmt":"2023-04-06T00:00:00","guid":{"rendered":"http:\/\/soubory.info\/znalost\/komplexni-pruvodce-zarovnavanim-textu-v-obsahu-html\/"},"modified":"2023-04-06T00:00:00","modified_gmt":"2023-04-06T00:00:00","slug":"komplexni-pruvodce-zarovnavanim-textu-v-obsahu-html","status":"publish","type":"post","link":"https:\/\/soubory.info\/znalost\/komplexni-pruvodce-zarovnavanim-textu-v-obsahu-html\/","title":{"rendered":"Komplexn\u00ed pr\u016fvodce zarovn\u00e1v\u00e1n\u00edm textu v obsahu HTML"},"content":{"rendered":"
\n
\u00davod do zarovn\u00e1v\u00e1n\u00ed obsahu v jazyce HTML<\/div>\n

Jazyk HTML je univerz\u00e1ln\u00ed k\u00f3dovac\u00ed jazyk, kter\u00fd lze pou\u017e\u00edt k vytv\u00e1\u0159en\u00ed webov\u00fdch str\u00e1nek, aplikac\u00ed a dal\u0161\u00edch aplikac\u00ed. Jedn\u00edm z nejd\u016fle\u017eit\u011bj\u0161\u00edch aspekt\u016f ka\u017ed\u00e9 webov\u00e9 str\u00e1nky je vizu\u00e1ln\u00ed prezentace jej\u00edho obsahu, kter\u00e1 zahrnuje zarovn\u00e1n\u00ed textu. V tomto \u010dl\u00e1nku se budeme zab\u00fdvat zarovn\u00e1n\u00edm textu v obsahu HTML pomoc\u00ed r\u016fzn\u00fdch prvk\u016f a vlastnost\u00ed jazyka HTML. <\/p>\n

Porozum\u011bn\u00ed vodorovn\u00e9mu zarovn\u00e1n\u00ed<\/div>\n

Vodorovn\u00e9 zarovn\u00e1n\u00ed je proces um\u00edst\u011bn\u00ed textu vlevo, vpravo nebo na st\u0159ed. Toho se \u010dasto dosahuje pomoc\u00ed vlastnosti CSS text-align. Chcete-li nap\u0159\u00edklad vycentrovat nadpis, m\u016f\u017eete tak u\u010dinit p\u0159id\u00e1n\u00edm stylu „text-align: center“ do prvku nadpis. <\/p>\n

Zkoum\u00e1n\u00ed vertik\u00e1ln\u00edho zarovn\u00e1n\u00ed<\/div>\n

Vertik\u00e1ln\u00ed zarovn\u00e1n\u00ed je proces um\u00edst\u011bn\u00ed textu na horn\u00ed, doln\u00ed nebo st\u0159ed str\u00e1nky nebo jin\u00e9ho kontejneru. To se obvykle prov\u00e1d\u00ed nastaven\u00edm vlastnosti vertical-align. Chcete-li nap\u0159\u00edklad zarovnat odstavec na spodn\u00ed \u010d\u00e1st str\u00e1nky, m\u016f\u017eete k prvku odstavce p\u0159idat styl „vertical-align: bottom“. <\/p>\n

Pr\u00e1ce s vlo\u017een\u00fdmi prvky<\/div>\n

Vlo\u017een\u00e9 prvky jsou prvky HTML, kter\u00e9 se nach\u00e1zej\u00ed v toku jin\u00e9ho obsahu na str\u00e1nce. P\u0159\u00edkladem inline prvk\u016f jsou odkazy, obr\u00e1zky a rozp\u011bt\u00ed. Chcete-li zarovnat \u0159\u00e1dkov\u00fd prvek, m\u016f\u017eete pou\u017e\u00edt vlastnost float. Pokud nap\u0159\u00edklad chcete odkaz posunout na pravou stranu obsahu, m\u016f\u017eete tak u\u010dinit p\u0159id\u00e1n\u00edm stylu „float: right“ k prvku odkaz. <\/p>\n

Zarovn\u00e1n\u00ed textu pomoc\u00ed vlastnosti Text-Align<\/div>\n

Vlastnost text-align slou\u017e\u00ed k zarovn\u00e1n\u00ed textu v kontejneru. Tato vlastnost m\u016f\u017ee nab\u00fdvat hodnot left, right, center a justified. Chcete-li nap\u0159\u00edklad zarovnat odstavec textu na levou stranu kontejneru, m\u016f\u017eete tak u\u010dinit p\u0159id\u00e1n\u00edm stylu „text-align: left“ k prvku odstavec. <\/p>\n

\u00daprava b\u00edl\u00e9ho m\u00edsta pomoc\u00ed vlastnosti White-space<\/div>\n

Vlastnost white-space slou\u017e\u00ed k \u00faprav\u011b zp\u016fsobu zobrazen\u00ed b\u00edl\u00e9ho m\u00edsta v kontejneru. Tato vlastnost m\u016f\u017ee nab\u00fdvat hodnot normal, pre a nowrap. Chcete-li nap\u0159\u00edklad zabr\u00e1nit tomu, aby se odstavec textu obt\u00e9kal na dal\u0161\u00ed \u0159\u00e1dek, m\u016f\u017eete tak u\u010dinit p\u0159id\u00e1n\u00edm stylu „white-space: nowrap“ k prvku odstavec. <\/p>\n

Pou\u017eit\u00ed vlastnosti Text-Indent k odsazen\u00ed textu<\/div>\n

Vlastnost text-indent se pou\u017e\u00edv\u00e1 k odsazen\u00ed textu v kontejneru. Tato vlastnost p\u0159eb\u00edr\u00e1 hodnotu d\u00e9lky nebo procenta a text bude o tuto hodnotu odsazen. Chcete-li nap\u0159\u00edklad odsadit odstavec textu o 10px, m\u016f\u017eete to prov\u00e9st p\u0159id\u00e1n\u00edm vlastnosti „text-indent: 10px“ k prvku odstavec. <\/p>\n

Z\u00e1v\u011br<\/div>\n

Zarovn\u00e1v\u00e1n\u00ed textu v obsahu HTML je d\u016fle\u017eitou sou\u010d\u00e1st\u00ed tvorby dob\u0159e navr\u017een\u00fdch webov\u00fdch str\u00e1nek. V tomto \u010dl\u00e1nku jsme se zab\u00fdvali zarovn\u00e1n\u00edm textu pomoc\u00ed r\u016fzn\u00fdch prvk\u016f a vlastnost\u00ed jazyka HTML, nap\u0159\u00edklad vlastnost\u00ed text-align, vertical-align, float, white-space a text-indent. Pomoc\u00ed t\u011bchto n\u00e1stroj\u016f m\u016f\u017eete vytv\u00e1\u0159et vizu\u00e1ln\u011b p\u0159ita\u017eliv\u00fd obsah HTML, kter\u00fd je spr\u00e1vn\u011b zarovnan\u00fd. <\/p><\/div>\n

\n
FAQ<\/div>\n
\n
Jak uprav\u00edm zarovn\u00e1n\u00ed textu?<\/div>\n

Zarovn\u00e1n\u00ed textu lze upravit n\u011bkolika r\u016fzn\u00fdmi zp\u016fsoby. Ve v\u011bt\u0161in\u011b program\u016f pro zpracov\u00e1n\u00ed textu nebo \u00fapravu textu m\u016f\u017eete pomoc\u00ed tla\u010d\u00edtek zarovn\u00e1n\u00ed na panelu n\u00e1stroj\u016f zarovnat text doleva, na st\u0159ed nebo doprava. M\u016f\u017eete tak\u00e9 pou\u017e\u00edt tla\u010d\u00edtko justify pro rovnom\u011brn\u00e9 rozlo\u017een\u00ed textu na str\u00e1nce. <\/p>\n

<\/div>\n

Pokud chcete m\u00edt nad zarovn\u00e1n\u00edm textu v\u011bt\u0161\u00ed kontrolu, m\u016f\u017eete pou\u017e\u00edt prav\u00edtko v horn\u00ed \u010d\u00e1sti str\u00e1nky. Chcete-li zarovnat text doleva, klikn\u011bte na lev\u00fd okraj prav\u00edtka a p\u0159et\u00e1hn\u011bte jej doprava. Chcete-li text vycentrovat, klikn\u011bte na st\u0159ed prav\u00edtka a p\u0159et\u00e1hn\u011bte jej doleva nebo doprava. Chcete-li text zarovnat doprava, klikn\u011bte na prav\u00fd okraj prav\u00edtka a p\u0159et\u00e1hn\u011bte jej doleva. <\/p>\n

<\/div>\n

Zarovn\u00e1n\u00ed textu m\u016f\u017eete upravit tak\u00e9 ru\u010dn\u011b pomoc\u00ed kl\u00e1vesy tabul\u00e1toru. Chcete-li zarovnat text doleva, stiskn\u011bte jednou kl\u00e1vesu Tabul\u00e1tor. Chcete-li text vycentrovat, stiskn\u011bte dvakr\u00e1t kl\u00e1vesu Tabul\u00e1tor. Chcete-li zarovnat text doprava, stiskn\u011bte kl\u00e1vesu Tabul\u00e1tor t\u0159ikr\u00e1t. <\/p>\n<\/div>\n

\n
Jak zarovnat text v HTML CSS?<\/div>\n

Zarovn\u00e1n\u00ed textu v HTML CSS lze prov\u00e9st t\u0159emi zp\u016fsoby: <\/p>\n

<\/div>\n

1. Vlastnost text-align <\/p>\n

<\/div>\n

Tato vlastnost umo\u017e\u0148uje horizont\u00e1ln\u00ed zarovn\u00e1n\u00ed textu v r\u00e1mci kontejnerov\u00e9ho prvku. Mo\u017en\u00e9 hodnoty jsou left, right, center a justify. <\/p>\n

<\/div>\n

2. Vlastnost float <\/p>\n

<\/div>\n

Tato vlastnost umo\u017e\u0148uje zarovnat prvek vlevo nebo vpravo od jeho kontejneru, \u010d\u00edm\u017e se text v n\u011bm obt\u00e9k\u00e1 kolem zarovnan\u00e9ho prvku. <\/p>\n

<\/div>\n

3. Vlastnost flex <\/p>\n

<\/div>\n

Tato vlastnost umo\u017e\u0148uje vytvo\u0159it flexibiln\u00ed rozlo\u017een\u00ed textu a dal\u0161\u00edch prvk\u016f v kontejneru. Mo\u017en\u00e9 hodnoty jsou \u0159\u00e1dek, sloupec a obt\u00e9k\u00e1n\u00ed. <\/p>\n<\/div>\n

\n
Jak zafixovat pozici textu v jazyce HTML?<\/div>\n

Existuje n\u011bkolik r\u016fzn\u00fdch zp\u016fsob\u016f, jak zafixovat pozici textu v jazyce HTML. Prvn\u00edm zp\u016fsobem je pou\u017eit\u00ed vlastnosti ‚position‘ v CSS. Vlastnost ‚position‘ lze nastavit na ‚absolute‘, ‚fixed‘ nebo ‚relative‘. Hodnota „absolutn\u00ed“ um\u00edst\u00ed prvek podle nejbli\u017e\u0161\u00edho pozicovan\u00e9ho p\u0159edka. ‚Pevn\u00e1‘ pozicuje prvek podle \u0161\u00ed\u0159ky pohledu. ‚Relativn\u00ed‘ pozicuje prvek podle jeho norm\u00e1ln\u00ed pozice. <\/p>\n

<\/div>\n

Dal\u0161\u00edm zp\u016fsobem, jak zafixovat pozici textu v HTML, je pou\u017eit\u00ed vlastnosti ‚float‘ v CSS. Vlastnost ‚float‘ lze nastavit na ‚left‘, ‚right‘ nebo ‚none‘. Vlastnost ‚left‘ zp\u016fsob\u00ed, \u017ee prvek bude plovouc\u00ed vlevo od obsahuj\u00edc\u00edho prvku. Hodnota ‚Right‘ zp\u016fsob\u00ed, \u017ee prvek bude plovouc\u00ed vpravo od obsahuj\u00edc\u00edho prvku. Hodnota ‚None‘ prvek nezobraz\u00ed. <\/p>\n

<\/div>\n

Posledn\u00edm zp\u016fsobem, jak opravit pozici textu v HTML, je pou\u017eit\u00ed vlastnosti ‚clear‘ v CSS. Vlastnost ‚clear‘ lze nastavit na ‚left‘, ‚right‘, ‚both‘ nebo ‚none‘. Vlastnost ‚vlevo‘ vyma\u017ee prvek z lev\u00e9 strany obsahuj\u00edc\u00edho prvku. ‚Right‘ vyma\u017ee prvek z prav\u00e9 strany obsahuj\u00edc\u00edho prvku. „Both“ vyma\u017ee prvek z lev\u00e9 i prav\u00e9 strany obsahuj\u00edc\u00edho prvku. „\u017d\u00e1dn\u00fd“ nevyma\u017ee prvek.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

\u00davod do zarovn\u00e1v\u00e1n\u00ed obsahu v jazyce HTML Jazyk HTML je univerz\u00e1ln\u00ed k\u00f3dovac\u00ed jazyk, kter\u00fd lze pou\u017e\u00edt k vytv\u00e1\u0159en\u00ed webov\u00fdch str\u00e1nek, aplikac\u00ed a dal\u0161\u00edch aplikac\u00ed. Jedn\u00edm z nejd\u016fle\u017eit\u011bj\u0161\u00edch aspekt\u016f ka\u017ed\u00e9 webov\u00e9 str\u00e1nky je vizu\u00e1ln\u00ed prezentace jej\u00edho obsahu, kter\u00e1 zahrnuje zarovn\u00e1n\u00ed textu. V tomto \u010dl\u00e1nku se budeme zab\u00fdvat zarovn\u00e1n\u00edm textu v obsahu HTML pomoc\u00ed r\u016fzn\u00fdch prvk\u016f a … \u010c\u00edst d\u00e1l<\/a><\/p>\n","protected":false},"author":3981,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-18172","post","type-post","status-publish","format-standard","hentry","category-zalozeni-nove-firmy"],"_links":{"self":[{"href":"https:\/\/soubory.info\/znalost\/wp-json\/wp\/v2\/posts\/18172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/soubory.info\/znalost\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/soubory.info\/znalost\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/soubory.info\/znalost\/wp-json\/wp\/v2\/users\/3981"}],"replies":[{"embeddable":true,"href":"https:\/\/soubory.info\/znalost\/wp-json\/wp\/v2\/comments?post=18172"}],"version-history":[{"count":0,"href":"https:\/\/soubory.info\/znalost\/wp-json\/wp\/v2\/posts\/18172\/revisions"}],"wp:attachment":[{"href":"https:\/\/soubory.info\/znalost\/wp-json\/wp\/v2\/media?parent=18172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/soubory.info\/znalost\/wp-json\/wp\/v2\/categories?post=18172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/soubory.info\/znalost\/wp-json\/wp\/v2\/tags?post=18172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}