Jump to content
Carlos Rocha

vertical Align middle não funciona nem com position: relative

Recommended Posts

Carlos Rocha

Preciso fazer com que as spans e a ul fiquem alinhadas verticalmente ao centro da div#banner mas não está funcionando como tentei!

Fiz uma tentativa e cheguei mais perto, embora o conteúdo tenha alinhado ao centro verticalmente como era o esperado, parece que não ocupou verticalmente todo a altura da div#banner..

html, body {
    margin: 0;
    padding: 0;    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: content-box;        
}

#banner {
    position: relative;
    width: 1536px;
    height: 610px;
    background-image: url("img/home1.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    z-index: -1;
}

#banner:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-image: linear-gradient(#004425, #072f1c 130%);
    opacity: .6;
}

#banner span {
    display: block;
    font-weight: bolder;
    font-size: 20pt;
}

#banner span, 
#banner ul {
    vertical-align: middle;        
    display: inline-block;
} 
<div id='banner'>
    <span id=volta><</span>
    <ul>
        <li><h1>Teste 1</h1></li>
        <li><h2>Teste 2</h2></li>
    </ul>
    <span id=avanca>></span>
</div>

 

Edited by carcleo

Share this post


Link to post
Share on other sites
Carlos Rocha

Tentei de outra forma. Os elementos de dento da div até se alinham entre si. Mas não se alinham na div:

CSS:

#banner {
  width: 200px;
  height: 200px;
  vertical-align: middle;
}

#banner span,
#banner ul {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 50px;
  height: 30px;
}

HTML:

<div id='banner'>

    <span id=volta><</span>
  
    <ul>
        <li><h1>Teste 1</h1></li>
        <li><h2>Teste 2</h2></li>
    </ul>
  
    <span id=avanca>></span>
  
</div>

 

Edited by carcleo

Share this post


Link to post
Share on other sites
Pedro M

Uma  forma de alinhar verticalmente, em vez de utlizar "vertical-align: middle;" passa por definir a "line-height" com um valor identico ao da altura do elemento.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.