Bootstrap，导航，导航丸，图像，图像垂直对齐

Question

我尝试制作一个菜单：

现在，我有问题，如何使图像垂直对齐到底部？可变图像尺寸。

现在它看起来像（太大的是图像，空间beettwen图像/跨度/文本）：

代码：

＆＃13;

＆＃13;

.vehicletype{
width:90%;
line-height:70px;
margin-right:5%;
margin-left:5%;
margin-top:5%;
}
.vehicletype img{
	vertical-align:bottom;
}
.vehicletype a{
	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{
	width:100%;
	color:rgba(200,54,55,1);
	filter:none;
	-webkit-filter:none;
	text-decoration:none;

}
.vehicletype ul li a:hover{
	filter:none;
	-webkit-filter:none;
	text-decoration:none;
}	
.vehicletype ul li a img{
	width:100%;
	margin-right:auto;
	margin-left:auto;
	padding-right:5%;
	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{
	filter:none;
	-webkit-filter:none;
}

.menuspan{
	width:90%;
	height:8px;
	border-radius:4px;
	background-color:rgba(200,54,55,1);
	-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;
}

＆＃13;

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

	
	<li ><a href="?vehicletype=car">
	<img src="http://pastorautoservis.com/sunday/theme/default/img/car1.png">
    <div class="menuspan"></div>Car</a></li>
	<li><a href="?vehicletype=van">
	
		<img src="http://pastorautoservis.com/sunday/theme/default/img/van1.png">
	
	<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">
	    <img src="http://pastorautoservis.com/sunday/theme/default/img/bus1.png">
	
    <div class="menuspan"></div>Bus</a></li>
    <li><a href="?vehicletype=motobike">
        <img src="http://pastorautoservis.com/sunday/theme/default/img/motobike1.png">
	<div class="menuspan"></div>motobike</a></li>
     <li><a href="?vehicletype=boat">
        <img src="http://pastorautoservis.com/sunday/theme/default/img/boat1.png">
	 <div class="menuspan"></div>boat</a></li>
      <li><a href="?vehicletype=oldtimer">
        <img src="http://pastorautoservis.com/sunday/theme/default/img/oldtimer1.png">
	<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我正在测试您的代码，我的建议是您需要为每个图像设置宽度/高度或调整图像大小。关于文本和图像之间的空间很简单，只需要更改line-height：70px from vehicleType class。

我希望我帮助你！

.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{
	vertical-align:bottom;
}
.vehicletype a{
	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{
	width:auto;
    max-width:100%;
	color:rgba(200,54,55,1);
	filter:none;
	-webkit-filter:none;
	text-decoration:none;

}
.vehicletype ul li a:hover{
	filter:none;
	-webkit-filter:none;
	text-decoration:none;
}	
.vehicletype ul li a img{
	width:auto;
    max-width:100%;
	margin-right:auto;
	margin-left:auto;
	padding-right:5%;
	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{
	filter:none;
	-webkit-filter:none;
}

.menuspan{
	width:90%;
	height:8px;
	border-radius:4px;
	background-color:rgba(200,54,55,1);
	-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">
	

	
	<li class="car"><a href="?vehicletype=car">
	<img src="http://pastorautoservis.com/sunday/theme/default/img/car1.png" >
    <div class="menuspan"></div>Car</a></li>
	<li class="van"><a href="?vehicletype=van">
	
		<img src="http://pastorautoservis.com/sunday/theme/default/img/van1.png">
	
	<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">
	    <img src="http://pastorautoservis.com/sunday/theme/default/img/bus1.png">
	
    <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">
	<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">
	 <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">
	<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

到今天它工作得很好，现在再次不好。 ：/ 代码：

@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{
	vertical-align:bottom;
}
.vehicletype a{
	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{
	width:auto;
    max-width:100%;
	color:rgba(200,54,55,1);
	filter:none;
	-webkit-filter:none;
	text-decoration:none;

}
.vehicletype ul li a:hover{
	filter:none;
	-webkit-filter:none;
	text-decoration:none;
}	
.vehicletype ul li a img{
	width:auto;
    max-width:100%;
	margin-right:auto;
	margin-left:auto;
	padding-right:5%;
	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{
	filter:none;
	-webkit-filter:none;
}

.menuspan{
	width:90%;
	height:8px;
	border-radius:4px;
	background-color:rgba(200,54,55,1);
	-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">
	<li class="car col-xs-6 l" ><a href="?vehicletype=car">
	<img src="http://origomalta.com/theme/default/img/car1.png" >
    <div class="menuspan"></div>Car</a></li>
	<li class="van col-xs-6 r"><a href="?vehicletype=van">
	
		<img src="http://origomalta.com/theme/default/img/van1.png">
	
	<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">
	    <img src="http://origomalta.com/theme/default/img/bus1.png">
	
    <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">
	<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">
	 <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">
	<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>

有工作，但是，在网站内没有。 ：/