Вопросы Теги

Как я выбираю точку ссылки, чтобы выравнивать объекты?

У меня есть это меню в заголовке моей страницы:

menú de mi cabecera .

Я пометил в синем цвете объекты (что находятся все контенты в том же div), для того, чтобы видели ясно, как они по умолчанию выстраиваются по прямой линии используя, как он снабжает ссылками самую высокую точку объекта. Если он хотел использовать нижний предел, или среднюю точку, что я должен касаться свойства?

Спасибо заранее

Я ИЗДАЮ: Я добавляю мой код:

 



 Title

0
задан 07.03.2019, 22:07
2 ответа

Чтобы этого добиваться ты можешь использовать свойство vertical-align

, Если navbar твоей страницы есть у height определенного, это свойство прекращает применять желанный эффект и тогда tambiГ©n deberГ-эксперт aГ±adir один margin-top, чтобы компенсировать height nav конечно ты intenciГіn, - тот показывания их bottom nav menГєs

, Если ты выполняешь пример, ты увидишь, как первый menГє выстраивается по прямой линии по умолчанию и второго menГє выстраивается по прямой линии bottom. 

div {
  display: inline;
  background: white;
  vertical-align: sub;
}
#naver div{
  vertical-align: baseline !important;
}
nav {
 background: black;
}
<nav id="naver">
<div>menu1</div>
<div>menu1</div>
<div>menu1</div>
<div>menu1</div>
</nav>
<br/>
<br/>
<br/>
<nav>
  <div>menu1</div>
  <div>menu1</div>
  <div>menu1</div>
  <div>menu1</div>
  <div>menu1</div>
</nav>

AГ±ado пример используя ты cГіdigo: 

body {
  margin: 0px;
  font-family: #; font-size: #;
  width: 100%;  /*Tienes que decirle al body que ocupe el 100% de la pagina*/
}
#pageTop {
  background: url(style/headerSliver.png) repeat-x;
  width: 100%; /*El nav ocupa el 100% de la pagina*/
  background: #FF0004;
  height: 100px; /*Decirle que ocupa la misma altura que la imagen*/
}
#pageTopLogo {
  height: 100px;
  width: 100px;
  margin: 0px;
  display: inline;
}
#menuTop {
  display: inline; /*Decirle siempre inline para que se renderize bien*/
  background: white;
  vertical-align: super; /*Alinear bien el div abajo*/
}
#menuTop a {
  background: gray;
  margin: 0px 10px;
  color: black;
  vertical-align: middle; /*Alinear el enlaze en el medio del div*/
  display: inline;
}
<!DOCTYPE html> 
<html>
<head>
<meta charset=" UTF-8">
<title> Title </title>           
</head> 
<body>
<nav id="pageTop">
  <!-- Alerta! recuerda que los elementos img se autocierran! -->
  <div id="pageTopLogo">
    <a href="#"><img src="https://via.placeholder.com/100" alt="logo"/></a>
  </div>
  <div id="menuTop">
    <a href="#"><img src="images/home.png"/></a>
    <a href="#">Button1</a>
    <a href="#">Button2</a>
    <a href="#">Button3</a>
    <a href="#">Button4</a>
  </div>
</nav>
<div id="pageMiddle"></div>
<div id="pageBottom"></div>
</body>
</html>

, Если то, что ты хочешь, состоит в том, чтобы ориентировать на способ твой ответ estГЎ aquГ - :

0
ответ дан 02.12.2019, 05:54
  • 1
    Спасибо за ответ, но я не получаю того, что я хочу :( издаю и añ ado копия моего текста, чтобы видеть, может ли кто-то помогать мне – Adria de Juan 07.03.2019, 22:06

Для которого queres делать хорошую альтернативу значит использовать flexbox. Например 

#pageTop > #pageTopWrap > #pageTopRest > #pageTopRestBottom {
    height: 42px;
    margin: 2px;
    margin-top: 8px;
    padding: 4px;
    display: flex;
    align-items: flex-end;
}

<div id="pageTopRestBottom">
    <a href="#"><img src="images/home.png"></img></a>
    <a href="#">Button1</img></a>
    <a href="#">Button2</img></a>
    <a href="#">Button3</img></a>
    <a href="#">Button4</img></a>
</div>

изменяя свойство align-статьи ты сможешь делать ее modificaciГіn, что ты желаешь

, Обрежь видеть ее documentaciГіn flexbox в: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout

, Чтобы делать доказательства способа rГЎpida и визуальная: http://the-echoplex.net/flexyboxes/

0
ответ дан 02.12.2019, 05:54

Теги

Похожие вопросы