Question

我试图让我的图标在我网站的移动视图中与其所属的文本垂直对齐。元素设置为vertical-align：middle等等，但似乎没有任何帮助......

可以在例如www.niklaskoskela.com/hkr.html

上看到

这个列表解释了项目发生的时间等等。

我没有足够的分数发布图片，所以我无法准确显示它的样子。

我很感激我能得到的任何帮助。

不知道如何制作JSFiddle

HTML：

<div class="info">
<ul>
 <li>
  <img src="img/skills.png" alt="skills">
 </li>
 <li>
  <h3>GRAPHIC DESIGN, INTERFACE DESIGN</h3> 
 </li>
</ul>   
<ul>
 <li>
  <img src="img/period.png" alt="period">
 </li>
 <li>
  <h3>OCT 2013 - JAN 2014</h3>
 </li>
</ul>
<ul>
 <li>
  <img src="img/website.png" alt="project website">
 </li>
 <li>
  <a href="http://www.hkr.se" target="_blank">
  <h3>WWW.HKR.SE</h3></a>
 </li>
</ul>       
</div>

CSS：

@media screen and（max-device-width：960px）{

.info{

    float: left;
    padding-bottom: 5%;
    width: 95%;
    padding-left: 5%;

}

.info ul{

    display: block;
    list-style: none;
    width: 93%;

}

.info ul li{

    list-style-type: none;
    vertical-align: middle;
    left: 0;

}

.info ul li img{

    width: 35%;
    height: auto;
    display: inline;

}

.info ul li a{

    color: #6dc4c8;

}

.info ul li a:hover{

    text-decoration: none;
    color: #cc7e47;
    border-bottom: 1px solid #cc7e47;

}

.info ul li h3{

    float: right;
    display: inline-block;
    font-family: 'Quicksand';
    color: #7a7a7a;
    font-size: 3em;
    font-weight: 400;
    width: 65%;

}

此致

Answer 1

你需要垂直对齐元素。例如IMG和文本你应该使用这个代码：

<强> HTML

<div class="info">
    <ul class="list">
        <li>
            <div class="img-holder"><img src="images/img-31.jpg" alt="image description"/></div>
            <h3>GRAPHIC DESIGN, INTERFACE DESIGN</h3>
        </li>
        <li>
            <div class="img-holder"><img src="img/period.png" alt="image description"/></div>
            <h3>OCT 2013 - JAN 2014</h3>
        </li>
        <li>
            <div class="img-holder"><img src="img/website.png" alt="project website"></div>
            <h3>WWW.HKR.SE</h3>
        </li>
    </ul>
</div>

<强> CSS

       .list {
        margin:0;
        padding:0;
        list-style:none;
    }
    .list li {
        width: 100%;
        overflow: hidden;
        margin: 0 0 15px;
    }
    .list .img-holder {
        display: inline-block;
        vertical-align: middle;
/*the sum of this elements should be less than 100% it is due to 3px bug*/
        width: 18%; 

    }
    .list .img-holder img {
        max-width: 100%;
        height: auto;
    }
    .list h3 {
        display: inline-block;
        vertical-align: middle;
        width: 80%;
        margin: 0;
    }

尝试自己调整此代码

Answer 2

您的UL标签不够宽广。它响应于屏幕宽度的缩小。你需要给它一个353像素的最小尺寸，它会起作用但会引起你必须解决的其他麻烦。

.info ul {
display: block;
list-style: none;
padding-top: 5%;
min-width: 353px;}

<li>元素不会在移动版本中垂直对齐</li>

2 个答案: