我试图将2个内联块元素垂直对齐到其父元素的中间。不幸的是,当我给两个元素vertical-align:middle时,其中一个略微与中间对齐而另一个没有。这是我的jsFiddle。
HTML
CSS
html,
body {
margin: 0;
}
.navContainer {
width: 100%;
height: 60px;
background-color: white;
box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.2), 0 0px 10px 0 rgba(0, 0, 0, 0.19);
}
.navBar {
width: 90%;
display: block;
margin: 0 auto;
height: 60px;
line-height: 60px;
}
.lineMenu {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.logo {
display: inline-block;
width: 120px;
vertical-align: middle;
margin-left: 35px;
}
.logo img {
width: 100%;
}
如何使两个元素在其父元素的中间对齐?
答案 0 :(得分:1)
你会踢自己答案很简单;)
您需要做的就是将.logo img
设置为display: block
:
.logo img {
display: block;
}
html,
body {
margin: 0;
}
.navContainer {
width: 100%;
height: 60px;
background-color: white;
box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.2), 0 0px 10px 0 rgba(0, 0, 0, 0.19);
}
.navBar {
width: 90%;
display: block;
margin: 0 auto;
height: 60px;
line-height: 60px;
}
/*Line menu CSS*/
.lineMenu {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.logo {
display: inline-block;
width: 120px;
vertical-align: middle;
margin-left: 35px;
}
.logo img {
width: 100%;
display: block;
}

<div class='navContainer'>
<div class='navBar'>
<div class="lineMenu" onclick="menuToggle(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class='logo'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png'>
</div>
</div>
</div>
&#13;
我创造了一个展示这个here的小提琴。
希望这有帮助! :)
答案 1 :(得分:1)
您可以将图片放在汉堡菜单旁边,然后vertical-align
将按预期工作。
html,
body {
margin: 0;
}
.navContainer {
width: 100%;
height: 60px;
background-color: white;
box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.2), 0 0px 10px 0 rgba(0, 0, 0, 0.19);
}
.navBar {
width: 90%;
display: block;
margin: 0 auto;
height: 60px;
line-height: 60px;
}
/*Line menu CSS*/
.lineMenu {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.logo {
display: inline-block;
width: 120px;
vertical-align: middle;
margin-left: 35px;
}
.logo img {
width: 100%;
}
&#13;
<div class='navContainer'>
<div class='navBar'>
<div class="lineMenu" onclick="menuToggle(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png' class="logo">
</div>
</div>
&#13;
您还可以将父级设置为display: flex
,并使用align-items: center
垂直居中。
html,
body {
margin: 0;
}
.navContainer {
width: 100%;
height: 60px;
background-color: white;
box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.2), 0 0px 10px 0 rgba(0, 0, 0, 0.19);
}
.navBar {
width: 90%;
display: flex;
margin: 0 auto;
height: 60px;
line-height: 60px;
align-items: center;
}
/*Line menu CSS*/
.lineMenu {
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.logo {
width: 120px;
margin-left: 35px;
}
.logo img {
width: 100%;
}
&#13;
<div class='navContainer'>
<div class='navBar'>
<div class="lineMenu" onclick="menuToggle(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png' class="logo">
</div>
</div>
&#13;