Attēli ir svarīga jebkuras tīmekļa lietojumprogrammas sastāvdaļa. Tīmekļa lietojumprogrammā parasti nav ieteicams iekļaut daudz attēlu, taču ir svarīgi attēlus izmantot visur, kur tie ir nepieciešami. CSS palīdz mums kontrolēt attēlu parādīšanu tīmekļa lietojumprogrammās.

Attēla līdzināšana nozīmē attēla novietošanu centrā, pa kreisi un pa labi. Mēs varam izmantot peldēt īpašums un teksta līdzināšana īpašība attēlu izlīdzināšanai.

Ja attēls atrodas div elementā, mēs varam izmantot teksta līdzināšana rekvizīts attēla līdzināšanai div.

Piemērs

Šajā piemērā mēs izlīdzinām attēlus, izmantojot teksta līdzināšana īpašums. Attēli atrodas div elementā.

 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"> 

Izmēģiniet to tūlīt

Izvade

Izmantojot pludiņa īpašumu

CSS peldošais rekvizīts ir pozicionēšanas rekvizīts. To izmanto, lai pabīdītu elementu pa kreisi vai pa labi, ļaujot citiem elementiem aptīt to. To parasti izmanto ar attēliem un izkārtojumiem.

Elementi tiek peldēti tikai horizontāli. Tātad ir iespējams tikai peldēt elementus pa kreisi vai pa labi, nevis uz augšu vai uz leju. Peldošu elementu var pārvietot pēc iespējas tālāk pa kreisi vai pa labi. Vienkārši tas nozīmē, ka peldošais elements var tikt parādīts galējā kreisajā vai galējā labajā pusē.

Piemērs

 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"> 

Izvade