When to use vertical-align?

Asked

Viewed 1,368 times

5

I am aware that in certain cases it is advisable to use this property instead of text-align , margin or position.

But I don’t know why or how vertical-align.

Besides, how do you use this property?

css positioning align
  • 1

    To vertical-alignserves to align texts vertically that are inside a table cell or a row. Already the horizontal-align I never heard of.

  • What a gaffe. Man, but for this function there is no longer the line-height?

  • 1

    Is that using line-height you are not aligning the element but increasing the line size to force a centering. One case: If you need to change the height of the element consequently the line-height will also need change, right? The vertical-align is to center the element vertically independent of the height.

  • 2

    @ropbla9 think of the same line that has a word with font 12, one with font 18, and an image inline. The vertical-align will decide whether to align everything by the middle, or by baseline (the bottom of the letters), or the top of the three things, or the bottom, for example. PS: I wrote to give an initial notion, if someone wants to post an answer with this information and give a better elaboration, feel free.

1 answer

4

Use vertical-align to vertically center an element in its "parent". Unlike text-align this does not adjust the text horizontally, but vertically the whole content of the element.

Can have the following values:

test{
    vertical-align: baseline; /* Alinha o elemento com a base do elemento pai. Essa é a opção padrão */
    vertical-align: *px; /* Alinha o elemento a * pixels da sua posição inicial. Use valores negativos para elevar o elemento */
    vertical-align: sub; /* Alinha o elemento como subescrito em relação à posição padrão. */
    vertical-align: super;  /* Alinha o elemento como superescrito em relação à posição padrão. */
    vertical-align: top; /* O elemento é alinhado pela margem superior do elemento mais alto da linha. */   
    vertical-align: text-top; /* O elemento é alinhado pelo topo da fonte do elemento "pai". */
    vertical-align: middle; /* O elemento é colocado verticalmente no centro do elemento pai. */
    vertical-align: bottom; /* O elemento é alinhado pela margem inferior do elemento mais abaixo da linha. */  
}   


var state = 0;
var states = ["baseline","-20px","sub","super","top","text-top","middle","bottom","text-bottom"]; 
$("document").ready(function(){
    $("#btn").click(function(){
        state += 1;
        if(state > 8){ state = 0; }
        alert(states[state]);
        $("#move").css("vertical-align", states[state]); 
        $("#move").text("vertical-align: " + states[state] + ";");
    });
});
div{
  font-size: 64px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pai">
  <center>
    <img src="http://i.imgur.com/Vzckf2Z.png" />
    Texto
    <img id="move" src="http://i.imgur.com/1EFwogv.png" />
    
  </center>
</div>
<button id="btn">Mover!</button>

  • In short: line-height increases paragraph spacing and vertical-align aligns an element vertically. Ok?

  • 1

    line-height increases the line spacing itself. Elements with display: inline for example will not increase the height of the whole paragraph, but only until the end of the element.

  • In short, the same thing I said.

Browser other questions tagged css positioning align

You are not signed in. Login or sign up in order to post.