css 下拉列表对齐 img 和文本
css drop down list align img and text
我的 css 有一个问题我可以解决,我需要在中心的下拉列表中对齐文本和 img。
igm 看起来居中,但文字稍低一些。
我还想让文本离 img
有点远
有什么帮助吗?
这就是我得到的
我删除了很多源代码 CSS 以便能够发布投票,我希望我的问题不在我删除的内容中。
HTML
<section class="main">
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-2">
<span>Deutsch</span>
<ul class="dropdown">
<li><a href="#"><img src="./images/flags/flags_iso/32/de.png" >Deutsch</a></li>
<li><a href="#"><img src="./images/flags/flags_iso/32/en.png" >English</a></li>
<li><a href="#"><img src="./images/flags/flags_iso/32/fr.png" >Français</a></li>
<li><a href="#"><img src="./images/flags/flags_iso/32/es.png" >Español</a></li>
</ul>
</div>
</div>
</section>
CSS
/* DEMO 2 */
.wrapper-dropdown-2 {
/* Size and position */
position: relative; /* Enable absolute positionning for children and pseudo elements */
width: 200px;
margin: 0 auto;
padding: 10px 15px;
/* Styles */
background: #fff;
border-left: 5px solid grey;
cursor: pointer;
outline: none;
}
.wrapper-dropdown-2:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: grey transparent;
}
.wrapper-dropdown-2 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: -5px;
right: 0px;
/* Hiding */
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-2 .dropdown li a {
display: block;
text-decoration: none;
color: #333;
border-left: 5px solid;
padding: 10px;
}
.wrapper-dropdown-2 .dropdown li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}
/* Active state */
.wrapper-dropdown-2.active:after {
border-width: 0 6px 6px 6px;
}
.wrapper-dropdown-2.active .dropdown {
opacity: 1;
pointer-events: auto;
}
/* No CSS3 support */
.no-opacity .wrapper-dropdown-2 .dropdown,
.no-pointerevents .wrapper-dropdown-2 .dropdown {
display: none;
opacity: 1; /* If opacity support but no pointer-events support */
pointer-events: auto; /* If pointer-events support but no pointer-events support */
}
.no-opacity .wrapper-dropdown-2.active .dropdown,
.no-pointerevents .wrapper-dropdown-2.active .dropdown {
display: block;
}
尝试使用
.wrapper-dropdown-2 .dropdown li a img{
vertical-align:middle;
}
抱歉我只能回答,我没有足够的积分来评论。看起来您的旗帜图像的高度比文本高。因此,这将增加包含标志和文本的 div 的高度。
[]
[]English
上面的4个方括号代表国旗。这就是正在发生的事情。而如果它们的大小相同:
[]English
.dropdown li a
{
display: inline-block;
line-height: 18px;
}
.dropdown li img
{
float: left;
margin-right: 5px;
}
我的 css 有一个问题我可以解决,我需要在中心的下拉列表中对齐文本和 img。 igm 看起来居中,但文字稍低一些。 我还想让文本离 img
有点远有什么帮助吗?
这就是我得到的
<section class="main">
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-2">
<span>Deutsch</span>
<ul class="dropdown">
<li><a href="#"><img src="./images/flags/flags_iso/32/de.png" >Deutsch</a></li>
<li><a href="#"><img src="./images/flags/flags_iso/32/en.png" >English</a></li>
<li><a href="#"><img src="./images/flags/flags_iso/32/fr.png" >Français</a></li>
<li><a href="#"><img src="./images/flags/flags_iso/32/es.png" >Español</a></li>
</ul>
</div>
</div>
</section>
CSS
/* DEMO 2 */
.wrapper-dropdown-2 {
/* Size and position */
position: relative; /* Enable absolute positionning for children and pseudo elements */
width: 200px;
margin: 0 auto;
padding: 10px 15px;
/* Styles */
background: #fff;
border-left: 5px solid grey;
cursor: pointer;
outline: none;
}
.wrapper-dropdown-2:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: grey transparent;
}
.wrapper-dropdown-2 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: -5px;
right: 0px;
/* Hiding */
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-2 .dropdown li a {
display: block;
text-decoration: none;
color: #333;
border-left: 5px solid;
padding: 10px;
}
.wrapper-dropdown-2 .dropdown li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}
/* Active state */
.wrapper-dropdown-2.active:after {
border-width: 0 6px 6px 6px;
}
.wrapper-dropdown-2.active .dropdown {
opacity: 1;
pointer-events: auto;
}
/* No CSS3 support */
.no-opacity .wrapper-dropdown-2 .dropdown,
.no-pointerevents .wrapper-dropdown-2 .dropdown {
display: none;
opacity: 1; /* If opacity support but no pointer-events support */
pointer-events: auto; /* If pointer-events support but no pointer-events support */
}
.no-opacity .wrapper-dropdown-2.active .dropdown,
.no-pointerevents .wrapper-dropdown-2.active .dropdown {
display: block;
}
尝试使用
.wrapper-dropdown-2 .dropdown li a img{
vertical-align:middle;
}
抱歉我只能回答,我没有足够的积分来评论。看起来您的旗帜图像的高度比文本高。因此,这将增加包含标志和文本的 div 的高度。
[]
[]English
上面的4个方括号代表国旗。这就是正在发生的事情。而如果它们的大小相同:
[]English
.dropdown li a
{
display: inline-block;
line-height: 18px;
}
.dropdown li img
{
float: left;
margin-right: 5px;
}