引導，導航，導航，丸，圖像，圖像中古立式對齊

Question

我試圖讓一個菜單：

現在，我有問題，我怎樣才能使圖像垂直對齊到下？可變圖像大小。

現在看起來（過大的圖像，空間beettwen圖像/ SPAN /文）：

代碼：

.vehicletype{ 
 
width:90%; 
 
line-height:70px; 
 
margin-right:5%; 
 
margin-left:5%; 
 
margin-top:5%; 
 
} 
 
.vehicletype img{ 
 
\t vertical-align:bottom; 
 
} 
 
.vehicletype a{ 
 
\t vertical-align:top; 
 
} 
 
.vehicletype ul li { 
 
float:left; 
 
width:12.5%; 
 
list-style:none; 
 
text-align:center; 
 
font-size:14pt; 
 
text-transform:uppercase; 
 
font-stretch:semi-condensed; 
 
font-weight:bold; 
 
} 
 

 
.vehicletype ul li a{ 
 
width:100%; 
 
color:rgba(200,54,55,1); 
 
    -webkit-filter: grayscale(100%) 
 
      brightness(135%) 
 
      contrast(120%); 
 
    filter: grayscale(100%) 
 
      brightness(135%) 
 
      contrast(120%); 
 
    transition: filter 0.1s, box-shadow 0.1s; 
 
    -webkit-transition: filter 0.1s, -webkit-filter 0.1s, box-shadow 0.1s; 
 

 

 
} 
 
.vehicletype ul li a:hover img{ 
 
\t width:100%; 
 
\t color:rgba(200,54,55,1); 
 
\t filter:none; 
 
\t -webkit-filter:none; 
 
\t text-decoration:none; 
 

 
} 
 
.vehicletype ul li a:hover{ 
 
\t filter:none; 
 
\t -webkit-filter:none; 
 
\t text-decoration:none; 
 
} \t 
 
.vehicletype ul li a img{ 
 
\t width:100%; 
 
\t margin-right:auto; 
 
\t margin-left:auto; 
 
\t padding-right:5%; 
 
\t padding-left:5%; 
 
    -webkit-filter: grayscale(100%) 
 
      brightness(135%) 
 
      contrast(120%); 
 
    filter: grayscale(100%) 
 
      brightness(135%) 
 
      contrast(120%); 
 
    
 
    transition: filter 0.3s, box-shadow 0.3s; 
 
    -webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s; 
 
    
 
} 
 
.vehicletype ul li a img:hover{ 
 
\t filter:none; 
 
\t -webkit-filter:none; 
 
} 
 

 
.menuspan{ 
 
\t width:90%; 
 
\t height:8px; 
 
\t border-radius:4px; 
 
\t background-color:rgba(200,54,55,1); 
 
\t -webkit-filter: grayscale(100%) 
 
      brightness(165%) 
 
      contrast(100%); 
 
    filter: grayscale(100%) 
 
      brightness(165%) 
 
      contrast(100%); 
 
    transition: filter 0.3s, box-shadow 0.3s; 
 
    -webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s; 
 
    margin-top:5%; 
 
    margin-left:5%; 
 
    margin-right:5%; 
 
} 
 
.vehicletype ul li .active a{ 
 
filter:none; 
 
-webkit-filter:none; 
 
} 
 
.vehicletype ul li .active img{ 
 
filter:none; 
 
-webkit-filter:none; 
 
}

<div class="vehicletype"> 
 
<ul class="vehicletypes"> 
 
\t 
 

 
\t 
 
\t <li ><a href="?vehicletype=car"> 
 
\t <img src="http://pastorautoservis.com/sunday/theme/default/img/car1.png"> 
 
    <div class="menuspan"></div>Car</a></li> 
 
\t <li><a href="?vehicletype=van"> 
 
\t 
 
\t \t <img src="http://pastorautoservis.com/sunday/theme/default/img/van1.png"> 
 
\t 
 
\t <div class="menuspan"></div>Van</a></li> 
 
    <li><a href="?vehicletype=truck"> 
 
    <img src="http://pastorautoservis.com/sunday/theme/default/img/truck1.png"> 
 
    <div class="menuspan"></div>Truck</a></li> 
 
    <li><a href="?vehicletype=bus"> 
 
\t  <img src="http://pastorautoservis.com/sunday/theme/default/img/bus1.png"> 
 
\t 
 
    <div class="menuspan"></div>Bus</a></li> 
 
    <li><a href="?vehicletype=motobike"> 
 
     <img src="http://pastorautoservis.com/sunday/theme/default/img/motobike1.png"> 
 
\t <div class="menuspan"></div>motobike</a></li> 
 
    <li><a href="?vehicletype=boat"> 
 
     <img src="http://pastorautoservis.com/sunday/theme/default/img/boat1.png"> 
 
\t <div class="menuspan"></div>boat</a></li> 
 
     <li><a href="?vehicletype=oldtimer"> 
 
     <img src="http://pastorautoservis.com/sunday/theme/default/img/oldtimer1.png"> 
 
\t <div class="menuspan"></div>oldtimer</a></li> 
 
     <li><a href="?vehicletype=other"> 
 
     <img src="http://pastorautoservis.com/sunday/theme/default/img/other1.png"> 
 
    <div class="menuspan"></div>other</a></li> 
 
</ul> 
 
</div>

Answer 1

我正在測試你的代碼，我的建議是，你需要爲每個圖像設置寬度/高度或調整圖像大小。關於文本和圖像之間的空間很容易，只需要將vehicle-class的line-height：70px更改爲。

我希望我能幫到你！

.vehicletype{ 
 
width:90%; 
 
line-height:40px; 
 
margin-right:5%; 
 
margin-left:5%; 
 
margin-top:5%; 
 
} 
 

 
.car img{height:21px;} 
 
.van img{height:32px;} 
 
.truck img{} 
 
.bus img{height:38px;} 
 
.moto img{height:21px;} 
 
.boat img{height:30px;} 
 
.old img{height:19px;} 
 
.other img{height:21px;} 
 

 
.vehicletype img{ 
 
\t vertical-align:bottom; 
 
} 
 
.vehicletype a{ 
 
\t vertical-align:top; 
 
    display:block; 
 
} 
 
.vehicletype ul li { 
 
float:left; 
 
width:12.5%; 
 
list-style:none; 
 
text-align:center; 
 
font-size:14pt; 
 
text-transform:uppercase; 
 
font-stretch:semi-condensed; 
 
font-weight:bold; 
 
} 
 

 
.vehicletype ul li a{ 
 
width:100%; 
 
color:rgba(200,54,55,1); 
 
    -webkit-filter: grayscale(100%) 
 
      brightness(135%) 
 
      contrast(120%); 
 
    filter: grayscale(100%) 
 
      brightness(135%) 
 
      contrast(120%); 
 
    transition: filter 0.1s, box-shadow 0.1s; 
 
    -webkit-transition: filter 0.1s, -webkit-filter 0.1s, box-shadow 0.1s; 
 

 

 
} 
 
.vehicletype ul li a:hover img{ 
 
\t width:auto; 
 
    max-width:100%; 
 
\t color:rgba(200,54,55,1); 
 
\t filter:none; 
 
\t -webkit-filter:none; 
 
\t text-decoration:none; 
 

 
} 
 
.vehicletype ul li a:hover{ 
 
\t filter:none; 
 
\t -webkit-filter:none; 
 
\t text-decoration:none; 
 
} \t 
 
.vehicletype ul li a img{ 
 
\t width:auto; 
 
    max-width:100%; 
 
\t margin-right:auto; 
 
\t margin-left:auto; 
 
\t padding-right:5%; 
 
\t padding-left:5%; 
 
    -webkit-filter: grayscale(100%) 
 
      brightness(135%) 
 
      contrast(120%); 
 
    filter: grayscale(100%) 
 
      brightness(135%) 
 
      contrast(120%); 
 
    
 
    transition: filter 0.3s, box-shadow 0.3s; 
 
    -webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s; 
 
    
 
} 
 
.vehicletype ul li a img:hover{ 
 
\t filter:none; 
 
\t -webkit-filter:none; 
 
} 
 

 
.menuspan{ 
 
\t width:90%; 
 
\t height:8px; 
 
\t border-radius:4px; 
 
\t background-color:rgba(200,54,55,1); 
 
\t -webkit-filter: grayscale(100%) 
 
      brightness(165%) 
 
      contrast(100%); 
 
    filter: grayscale(100%) 
 
      brightness(165%) 
 
      contrast(100%); 
 
    transition: filter 0.3s, box-shadow 0.3s; 
 
    -webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s; 
 
    margin-top:5%; 
 
    margin-left:5%; 
 
    margin-right:5%; 
 
} 
 
.vehicletype ul li .active a{ 
 
filter:none; 
 
-webkit-filter:none; 
 
} 
 
.vehicletype ul li .active img{ 
 
filter:none; 
 
-webkit-filter:none; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="vehicletype"> 
 
<ul class="vehicletypes"> 
 
\t 
 

 
\t 
 
\t <li class="car"><a href="?vehicletype=car"> 
 
\t <img src="http://pastorautoservis.com/sunday/theme/default/img/car1.png" > 
 
    <div class="menuspan"></div>Car</a></li> 
 
\t <li class="van"><a href="?vehicletype=van"> 
 
\t 
 
\t \t <img src="http://pastorautoservis.com/sunday/theme/default/img/van1.png"> 
 
\t 
 
\t <div class="menuspan"></div>Van</a></li> 
 
    <li class="truck"><a href="?vehicletype=truck"> 
 
    <img src="http://pastorautoservis.com/sunday/theme/default/img/truck1.png"> 
 
    <div class="menuspan"></div>Truck</a></li> 
 
    <li class="bus"><a href="?vehicletype=bus"> 
 
\t  <img src="http://pastorautoservis.com/sunday/theme/default/img/bus1.png"> 
 
\t 
 
    <div class="menuspan"></div>Bus</a></li> 
 
    <li class="moto"><a href="?vehicletype=motobike"> 
 
     <img src="http://pastorautoservis.com/sunday/theme/default/img/motobike1.png"> 
 
\t <div class="menuspan"></div>motobike</a></li> 
 
    <li class="boat"><a href="?vehicletype=boat"> 
 
     <img src="http://pastorautoservis.com/sunday/theme/default/img/boat1.png"> 
 
\t <div class="menuspan"></div>boat</a></li> 
 
     <li class="old"><a href="?vehicletype=oldtimer"> 
 
     <img src="http://pastorautoservis.com/sunday/theme/default/img/oldtimer1.png"> 
 
\t <div class="menuspan"></div>oldtimer</a></li> 
 
     <li class="other"><a href="?vehicletype=other"> 
 
     <img src="http://pastorautoservis.com/sunday/theme/default/img/other1.png"> 
 
    <div class="menuspan"></div>other</a></li> 
 
</ul> 
 
</div>

Answer 2

到今天它完美地工作，現在又是不好的。 ：/ A碼：

@media(min-width:768px){ 
 
.vehicletype{ 
 
width:95%; 
 
line-height:40px; 
 
margin-right:5%; 
 
margin-left:5%; 
 
margin-top:5%; 
 
} 
 

 
.car img{height:21px;} 
 
.van img{height:32px;} 
 
.truck img{height:32px;} 
 
.bus img{height:38px;} 
 
.moto img{height:21px;} 
 
.boat img{height:30px;} 
 
.old img{height:19px;} 
 
.other img{height:21px;} 
 

 
.vehicletype img{ 
 
\t vertical-align:bottom; 
 
} 
 
.vehicletype a{ 
 
\t vertical-align:top; 
 
    display:block; 
 
} 
 
.vehicletype ul li { 
 
float:left; 
 
width:12.5%; 
 
list-style:none; 
 
text-align:center; 
 
font-size:14pt; 
 
text-transform:uppercase; 
 
font-stretch:semi-condensed; 
 
font-weight:bold; 
 
} 
 

 
.vehicletype ul li a{ 
 
width:100%; 
 
color:rgba(200,54,55,1); 
 
    -webkit-filter: grayscale(100%) 
 
      brightness(135%) 
 
      contrast(120%); 
 
    filter: grayscale(100%) 
 
      brightness(135%) 
 
      contrast(120%); 
 
    transition: filter 0.1s, box-shadow 0.1s; 
 
    -webkit-transition: filter 0.1s, -webkit-filter 0.1s, box-shadow 0.1s; 
 

 

 
} 
 
.vehicletype ul li a:hover img{ 
 
\t width:auto; 
 
    max-width:100%; 
 
\t color:rgba(200,54,55,1); 
 
\t filter:none; 
 
\t -webkit-filter:none; 
 
\t text-decoration:none; 
 

 
} 
 
.vehicletype ul li a:hover{ 
 
\t filter:none; 
 
\t -webkit-filter:none; 
 
\t text-decoration:none; 
 
} \t 
 
.vehicletype ul li a img{ 
 
\t width:auto; 
 
    max-width:100%; 
 
\t margin-right:auto; 
 
\t margin-left:auto; 
 
\t padding-right:5%; 
 
\t padding-left:5%; 
 
    -webkit-filter: grayscale(100%) 
 
      brightness(135%) 
 
      contrast(120%); 
 
    filter: grayscale(100%) 
 
      brightness(135%) 
 
      contrast(120%); 
 
    
 
    transition: filter 0.3s, box-shadow 0.3s; 
 
    -webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s; 
 
    
 
} 
 
.vehicletype ul li a img:hover{ 
 
\t filter:none; 
 
\t -webkit-filter:none; 
 
} 
 

 
.menuspan{ 
 
\t width:90%; 
 
\t height:8px; 
 
\t border-radius:4px; 
 
\t background-color:rgba(200,54,55,1); 
 
\t -webkit-filter: grayscale(100%) 
 
      brightness(165%) 
 
      contrast(100%); 
 
    filter: grayscale(100%) 
 
      brightness(165%) 
 
      contrast(100%); 
 
    transition: filter 0.3s, box-shadow 0.3s; 
 
    -webkit-transition: filter 0.3s, -webkit-filter 0.3s, box-shadow 0.3s; 
 
    margin-top:5%; 
 
    margin-left:5%; 
 
    margin-right:5%; 
 
} 
 
.vehicletype ul li .active a{ 
 
filter:none; 
 
-webkit-filter:none; 
 
} 
 
.vehicletype ul li .active img{ 
 
filter:none; 
 
-webkit-filter:none; 
 
} 
 
}

<div class="page"> 
 
<div class="vehicletype col-xs-12 col-md-12 col-lg-12"> 
 
<ul class="vehicletypes" id="vehicletypes"> 
 
\t <li class="car col-xs-6 l" ><a href="?vehicletype=car"> 
 
\t <img src="http://origomalta.com/theme/default/img/car1.png" > 
 
    <div class="menuspan"></div>Car</a></li> 
 
\t <li class="van col-xs-6 r"><a href="?vehicletype=van"> 
 
\t 
 
\t \t <img src="http://origomalta.com/theme/default/img/van1.png"> 
 
\t 
 
\t <div class="menuspan"></div>Van</a></li> 
 
    <li class="truck col-xs-6 l"><a href="?vehicletype=truck"> 
 
    <img src="http://origomalta.com/theme/default/img/truck1.png"> 
 
    <div class="menuspan"></div>Truck</a></li> 
 
    <li class="bus col-xs-6 r"><a href="?vehicletype=bus"> 
 
\t  <img src="http://origomalta.com/theme/default/img/bus1.png"> 
 
\t 
 
    <div class="menuspan"></div>Bus</a></li> 
 
    <li class="moto col-xs-6 l"><a href="?vehicletype=moto"> 
 
     <img src="http://origomalta.com/theme/default/img/motobike1.png"> 
 
\t <div class="menuspan"></div>motobike</a></li> 
 
    <li class="boat col-xs-6 r"><a href="?vehicletype=boat"> 
 
     <img src="http://origomalta.com/theme/default/img/boat1.png"> 
 
\t <div class="menuspan"></div>boat</a></li> 
 
     <li class="old col-xs-6 l"><a href="?vehicletype=oldtimer"> 
 
     <img src="http://origomalta.com/theme/default/img/oldtimer1.png"> 
 
\t <div class="menuspan"></div>oldtimer</a></li> 
 
     <li class="other col-xs-6 r"><a href="?vehicletype=other"> 
 
     <img src="http://origomalta.com/theme/default/img/other1.png"> 
 
    <div class="menuspan"></div>other</a></li> 
 
</ul> 
 
</div> 
 
</div>

有工作很好，但是，一個網站，裏面沒有。 ：/