Jump to content
carcleo

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

Recommended Posts

carcleo

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
carcleo

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • 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.