Question

我是网页设计的新手。我正在尝试制作一个包含图标和链接的方框。当屏幕是笔记本电脑时，链接应位于图标的左侧，并垂直对齐其中心;当屏幕是平板电脑和手机时，图标应位于图标的底部，并与其中心水平对齐。图标比链接大得多。以下是代码和图片链接：

<div class="box">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6">
             <span class="info-box-icon"><i class="mega-octicon octicon-server"></i></span>
        </div>
        <div  class="col-xs-12 col-sm-12 col-md-6">
            <a class="side-box-link" href="workflow-summary" style="vertical-align:middle;">Work Flow</a>
        </div>  
    </div>  
</div>

图片链接：

bg和md： http://ww3.sinaimg.cn/bmiddle/77f9deafgw1evmq9c8z5tj206703amx6.jpg
sm和xs： http://ww3.sinaimg.cn/bmiddle/77f9deafgw1evmq9cxdttj2045041gll.jpg

我尝试了很多方法，但仍无法使链接与图标的中心垂直对齐，并且链接始终在框顶部对齐。我试过的方法：

使用表格，并将图标和链接设置为两个表格数据：它们可以对齐为我想要什么，但由于它们是两列，链接无法移动屏幕尺寸改变时向下。
使用表格，将它们放在同一行：在框顶部对齐。
使用列表：对齐框顶部。
在CSS中使用margin：在md和bg屏幕中对齐好但是图标和链接在sm和xs中也会有差距。
使用＆＃34; vertical-align：middle＆＃34;在CSS中：只是不工作

我该怎么办？任何建议都将不胜感激，谢谢！

Answer 1

您可以使用Flexbox，这里有一个很好的指南A Complete Guide to Flexbox

另请看一下我为您制作的这个例子，希望它可以帮助您。

Html代码：

<div class="box">
<div class="row">
    <div class="icon">
         <span class="info-box-icon"><i class="mega-octicon octicon-server"></i></span>
    </div>
    <div class="link">
        <a class="side-box-link" href="workflow-summary" style="vertical-align:middle;">Work Flow</a>
    </div>  
</div>

这就是CSS：

.row {
display: flex;
align-items: center;

}
.icon {
    width: 200px;
    height: 200px;
    background-color: salmon ;
}
.link{
    padding: 10px;
}

a {
    text-decoration: none;
}

@media (max-width: 450px) {
    .row {
        flex-direction: column;
    }   
}

我确实使用带有图标的固定尺寸来说明，但它可以使用任何尺寸。

看一下这个实例JSFiddle Flex Example

CSS：如何将分部与另一个分部的中心对齐？

1 个答案: