html - 如何用 CSS 完成这个简单的布局？

Question

我想要一个设置了宽度和高度的容器。在那个容器中我有:

• 垂直和水平居中的文本

• 容器左侧有几个垂直居中的图标

• 容器右侧的几个垂直居中的图标

我的测试代码:

.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
vertical-align:middle;
margin:auto;
}

.text {
display:inline-block;
font-size:18px;
text-align:center;
}

.iconsleft, .iconsright {
display:inline-block;
}

.iconsright {
right:0;
}

<div class="container">
    <div class="iconsleft">
        <img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
        <img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
    </div>
    <div class="text">centered text</div>
    <div class="iconsright">
        <img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
        <img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
    </div>
</div>

(我从谷歌随机拿了一个图标来做这个测试)

这是我的测试代码的样子以及它应该的样子:

http://imgur.com/0QfcQnF

CodePen

Answer 1

我尽量避免 float :

http://jsfiddle.net/techsin/Gz4nv/1/

我做过的事情:

• 插入空白内容，其类型设置为inline-block(默认由css content:'etc'添加的内容是行内元素)，并设为100百分比容器的高度，从而将行高拉伸(stretch)到容器的高度。因此，当我将 vertical-align 东西时，它会将容器的整个高度视为要对齐的东西。
• 声明容器位置是相对的。这绝对有助于定位图标。因为绝对定位指的是第一个已经显式相对定位的父元素。 position:relative。
• 只需将 left:0; 放在左侧容器上，将 right:0; 放在右侧容器上即可。
• 使它们都向下移动容器高度的 50%。
• 然后通过给它们负边距，让它们向上移动容器高度的 1/4，使它们垂直居中。