Попытка центрировать ссылку в CSS с верхним заголовком, но не двигаться

Привет, я пытаюсь сохранить ссылки в центре поля загар. Как я могу сосредоточиться на краю загар? Ive пробовал несколько вещей, но поля не двигаются.Попытка центрировать ссылку в CSS с верхним заголовком, но не двигаться

это сайт

http://codepen.io/willc86/pen/hpFLe

упаковывают вы хотите увидеть визуальный.

Я не уверен, почему ссылки не хотят двигаться, когда я использую запас левой или окраина-топ

КСС

#header{ 
    background-color: tan; 
    width: 90%; 
    Height: 80px; 
    margin: auto; 
    margin-bottom: 30px; 
    text-align: center; 
} 

#header a { 
    margin: 40px; 
    border: 3px solid green; 

} 



#box{ 
    border: 3px solid red; 
} 

#space{ 
    text-align: center; 

} 
#leftcolumn { 
    width: 300px; border: 1px solid red; float: left; margin-left: 30px; 


} 
#mcolumn { 
    width: 300px; border: 1px solid red; margin: auto; 

} 
#rightcolumn { 
    width: 300px; border: 1px solid red; float: right; margin-right: 30px; 


} 

.clear { 
    clear: both; 
} 



#box2{ 
    border: 3px solid green; 
    margin: 40px; 
    text-align: center; 
} 

#bx{ 
    border: 3px solid green; 
    margin: auto; 
    width: 200px; 

} 

#box2{ 
    border: 3px solid green; 
    margin: 40px; 
    text-align: center; 
} 

#margin{ 
    margin: 30px; 
}

и мой HTML является

<html> 
    <head> 

     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>JSP Page</title> 

    </head> 
    <body> 

     <div id="header">  
     <a href="http:www.facebook.com"> Facebook </a> 
     <a href="http:www.facebook.com"> Google </a> 
     <a href="http:www.facebook.com"> Yahoo </a>   
     </div> 


     <div id="box"> 
      <div id="space">  
       <div id="leftcolumn"><p>LEFT</p></div> 
       <div id="rightcolumn"><p>RIGHT</p></div> 
         <div id="margin"> 
       <div id="mcolumn"><p>mcolomn</p></div> 
         </div> 
       <div class="clear"></div>   
      </div> 
     </div> 



     <div id="box2">  
      <div id="margin"> 
       <div id="bx"> 
       <p> hello what is up 
       </div> 
      </div> 
     </div> 



    </body> 
</html>

источник

2013-11-27 user3466255

вы пытаетесь вертикального выравнивания по центру Звенья, кажется, в центре по горизонтали в момент – grimmus

Если вы хотите выровнять по вертикали:

#header a { 
    ... 
    line-height: 80px; 
}

источник

2013-11-27 15:08:48 Jop

вау, такая легкая вещь, спасибо тебе так много парней !! – user3466255

Добавить это #header

#header { 
    .... 
    line-height: 80px; 
    vertical-align: middle; 
}

Также проверьте demo.

Обратите внимание, что это может вызвать проблемы , если вы хотите, чтобы линии меню.

источник

2013-11-27 15:12:35 LinkinTED

Общие Кончик: всегда добавить line-height равную высоте div «s, чтобы выровнять ссылку в вертикальной средней позиции

line-height:80px; в #header a будет делать работу за вас! :)

источник

2013-11-27 15:12:52 NoobEditor

#header a { 
    border: 3px solid #008000; 
    display: inline-block; 
    margin: 0 40px; 
    position: relative; 
    top: 50%; 
}

Примечание: top: 50% каким-то образом использует heightиmargin родителя.

источник

2013-11-27 15:25:04 luca

Вы также можете сделать это так: создать div внутри (я назвал его ссылками), который вы можете отформатировать вдали от своего другого div. Поля не отображаются, потому что текст встроен, и вы не можете дать встроенный текст верхнее и нижнее поле. Изменение его для отображения: inline-block и position: relative позволяет вам изменить место div (если вы не хотите устанавливать высоту строки). Верх: 36% будут центрировать его, потому что это подсчитывает маржу (так что вы хотите половину 80/110 px, или 4/11 = ~ 36% (вы можете сделать это 50% путем добавления поля к объекту внизу).

HTML:

<div id="links"><a href="http:www.facebook.com"> Facebook </a> 
    <a href="http:www.facebook.com"> Google </a> 
    <a href="http:www.facebook.com"> Yahoo </a> 
</div>

CSS:.

#header a { 
    border: 3px solid green; 
    margin-left: 40px; 
    margin-right: 40px; 
} 

#links { 
    display: inline-block; 
    position: relative; 
    top: 36%; 
}

http://codepen.io/anon/pen/vbJkg

источник

2013-11-27 15:26:20

Попытка центрировать ссылку в CSS с верхним заголовком, но не двигаться

ответ

Смежные вопросы