[CSS] Allineamento verticale e orizzontale

Allineamento orizzontale dell’elemento:

<style>
.center_1 {
  margin: auto;
  display: block;
  width: 50%;
  border: 3px solid yellow;
  padding: 10px;
}
</style>
<p class="center_1">Test</p>
<img class="center_1" src="http://goo.gl/0bRYKb">

Test

<style>
.center_2 {
  margin-left: 200px;
  margin-right: 200px;
  display: block;
  border: 3px solid yellow;
  padding: 10px;
}
</style>
<p class="center_2">Test2</p>

Test2

Allineamento orizzontale del testo:

<style>
.center_3 {
  text-align: center;
  border: 3px solid yellow;
}
</style>
<p class="center_3">Test3</p>

Test3

Allineamento verticale del testo e dell’elemento:

<style>
.center_4 {
  padding-top: 200px;
  padding-bottom: 200px;
  display: block;
  border: 3px solid yellow;
}
</style>
<p class="center_4" style="text-align:center">Test4</p>
<div class="center_4"><img src="http://goo.gl/0bRYKb"></div>

Test4

<style>
.verticalalign_1 {
    width: 200px;
    height: 300px;
    border: 1px solid black;
    background-color:yellow;
    line-height: 300px;
    vertical-align: middle;
}
</style>
<div class="verticalalign_1">Test5</div>

Test5
blog, css

Related Articles

0 Comment

Rispondi