У меня есть это меню в заголовке моей страницы:
Я пометил в синем цвете объекты (что находятся все контенты в том же div), для того, чтобы видели ясно, как они по умолчанию выстраиваются по прямой линии используя, как он снабжает ссылками самую высокую точку объекта. Если он хотел использовать нижний предел, или среднюю точку, что я должен касаться свойства?
Спасибо заранее
Я ИЗДАЮ: Я добавляю мой код:
Title
Чтобы этого добиваться ты можешь использовать свойство 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Г - :
Для которого 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/