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

Question

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

0

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

Вот сайт, если вы хотите визуально увидеть проблему:

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

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

CSS это

#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>

user3466255 27 нояб. 2013, в 16:06

Источник

0

Вы пытаетесь вертикально выровнять по центру? Похоже, что ссылки в данный момент центрированы горизонтально.
grimmus 27 нояб. 2013, в 15:08

Теги:

javascript

html

css

asp.net

cascadingdropdown

5 ответов

Ещё вопросы

Вы пытаетесь вертикально выровнять по центру? Похоже, что ссылки в данный момент центрированы горизонтально.

Jop · Answer 1 · 2013-11-27T14-05-00.000Z

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

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

вау такая легкая вещь спасибо большое, ребята !!

luca · Answer 2 · 2013-11-27T13-15-00.000Z

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

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

LinkinTED · Answer 3 · 2013-11-27T13-04-00.000Z

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

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

Также проверьте демоверсию.

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

Chris Smith · Answer 4 · 2013-11-27T12-32-00.000Z

Вы также можете сделать это так: создать 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

NoobEditor · Answer 5 · 2013-11-27T12-20-00.000Z

Общий совет: всегда добавляйте line-height равную высоте div чтобы выровнять вашу ссылку в вертикальном среднем положении

line-height:80px; в #header a выполнит эту работу за вас! :)