Obrázky sú dôležitou súčasťou každej webovej aplikácie. Zahrnutie veľkého množstva obrázkov do webovej aplikácie sa vo všeobecnosti neodporúča, ale je dôležité použiť obrázky všade tam, kde je to potrebné. CSS nám pomáha ovládať zobrazovanie obrázkov vo webových aplikáciách.
Zarovnanie obrázka znamená umiestniť obrázok na stred, doľava a doprava. Môžeme použiť plavák majetok a zarovnanie textu vlastnosť na zarovnanie obrázkov.
Ak je obrázok v prvku div, môžeme použiť zarovnanie textu vlastnosť na zarovnanie obrázku v div.
Príklad
V tomto príklade zarovnávame obrázky pomocou zarovnanie textu nehnuteľnosť. Obrázky sú v prvku div.
div { border: 2px solid red; } img{ height: 250px; width: 250px; } #left { text-align: left; } #center { text-align: center; } #right{ text-align: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> Vyskúšajte to Výkon
Použitie vlastnosti float
Vlastnosť CSS float je vlastnosť polohovania. Používa sa na zatlačenie prvku doľava alebo doprava, čím sa umožní, aby sa okolo neho obtočili ďalšie prvky. Vo všeobecnosti sa používa s obrázkami a rozloženiami.
Prvky sa vznášajú iba vodorovne. Takže je možné plávať len prvky doľava alebo doprava, nie hore alebo dole. Plávajúci prvok môže byť posunutý čo najviac doľava alebo doprava. Jednoducho to znamená, že plávajúci prvok sa môže zobraziť úplne vľavo alebo úplne vpravo.
Príklad
img{ height: 200px; width: 250px; border: 7px ridge blue; } #left{ float: left; } #right{ float: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="left"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="right"> Vyskúšajte to Výkon
vypnite režim vývojára
