CSS aliniere text, imagine, div
CSS Tutorial » CSS aliniere text, imagine, div
Cum se aplica, definitie.
CSS align specifică alineația unui element ca și cutie div, text, imagine de mai multe forme:
left: valoarea implicită. Conținutul este aliniat în partea stângă.
right: conținutul este aliniat în partea dreaptă.
center:conținutul este centrat între marginile din stânga și din dreapta. Semifabricatele din stânga și dreapta fiecărei linii trebuie să fie aceleași.
justify: conținutul este distanțat astfel încât să se potrivească cât mai multe blocuri pe o linie, iar primul cuvânt de pe acea linie este de-a lungul marginii stângi și ultimul cuvânt de-a lungul marginii din dreapta.
inherit: valoarea va fi orice este elementul părinte.
Acest element verde are o lățime de 300 px, o înălțime de 150 px, un chenar rosu subțire, solidă, o margine galbenă de 10 px și
centrat în centru.
o casetă div centrată pe centru este puțin diferită, utilizați: margin-left: auto; margin-dreapta: auto
Aliniere text CSS
Textul din elementele la nivel de bloc poate fi aliniat setând corect alinierea textului.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body><h2>Text central</h2>
<div class="center">
<p>Acest text este centrat.</p>
</div></body>
</html>
Etichete: alinierea imaginii css, text, vertical, aliniați centrul css, dreapta, centrat, text vertical, orizontal,
Aliniați la centru folosind proprietatea marginii
Alinierea centrală a unui element la nivelul blocului este una dintre cele mai importante implicații ale proprietății de marjă CSS.
De exemplu, containerul < div > poate fi aliniat orizontal în centru setând marginile stânga și dreapta la automat.
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>Exemplu de aliniere centrală CSS</title>
<style>
div {
width: 50%;
margin: 0 auto;
padding: 15px;
background: #ffd99b;
}
</style>
</head>
<body>
<div>Acest div de container este aliniat orizontal în centru.</div>
</body>
</html>
Aliniere imagine la centru
Pentru a centra o imagine, setați marginile stânga și dreapta auto și faceți din ea un element bloc:
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body><h2>Centrează o imagine</h2>
<p>Pentru a centra o imagine, setați marginea din stânga
și chiar în automat și faceți din el un element bloc.</p><img src="https://www.agernic.com/uploads/landscape_beach.jpg"
alt="Paris" style="width:40%"></body>
</html>
Aliniere la stânga și la dreapta: folosind float
O altă metodă de aliniere a elementelor este utilizarea proprietății float:
<!DOCTYPE html>
<html>
<head>
<style>
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body><h2>Pentru a vă alinia la dreapta</h2>
<p>Un exemplu de cum să aliniați elementele la dreapta cu proprietatea float:</p><div class="right">
<p>În anii mei mai tineri și mai vulnerabili, tatăl meu mi-a dat ceva
sfaturi care se învârt în mintea mea de atunci.</p>
</div></body>
</html>
alinierea imaginii la stanga, dreapta si central in css
alinierea unui text
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.