Demo here

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

我尽量避免花车：

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

我做的事情：

插入的空白内容，其类型设置为inline-block（默认情况下由css content:'etc'添加的内容是内联元素），并使其成为容器高度的100％，从而将行高度拉伸到容器高度。因此，当我vertical-align某事时，它会将容器的整个高度视为与之对齐的东西。
将容器位置声明为相对位置。哪个有助于绝对定位图标。因为绝对定位是指相对明确定位的第一个父元素。 position:relative。
简单地将left:0;放在左侧容器上，将right:0;放在右侧容器上。
使它们都向下移动容器高度的50％。
然后让它们向上移动容器高度的1/4，使它们垂直居中，给它们负边距。

Answer 2

Demo

如果你想让图标转到一边，你应该告诉他们{J}向那个方向走。

文本不居中，因为它只占用了所需的空间。明确设置宽度将告诉它占用更多空间，从而允许文本居中。这可以是像素或百分比。例如，如果您有一个宽度为A的容器和四个宽度为B（每个）的图像，则可以将宽度设置为float像素。

A - 4B

Answer 3

如果您有text-align: center，则需要在父块上设置

display: inline-block，而不是居中的块。

同样vertical-align:middle;对你没有任何好处，除非你在一个表格单元格中（或者像一个样式的div）。如果你想在IE7 +上使用“真正的”垂直居中，请使用好的表格，与vertical-align: middle一起使用。或者只是用边距伪造它。

对于.iconsleft和.iconsright使用，您可能需要尝试浮点数，或position: absolute;

CSS：

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

.text {
  font-size:18px;
  margin-top: 22px;
}

.iconsleft, .iconsright {
  margin: 20px 10px 0;
}

.iconsleft {
  float: left;
}

.iconsright {
  float: right;
}

HTML（需要在内容之前写入浮点数）：

<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="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 class="text">centered text</div>
</div>

Answer 4

只需向左和向右浮动两侧<div>，然后将右侧<div>放在HTML结构中的居中<div>之前。

Demo here

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

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

.iconsleft {float: left;}
.iconsright {float: right;}
</style>

<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="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 class="text">Centered demo text</div>
</div>

通过更改容器高度并为其添加一些底部填充，可以使整个框垂直居中。

Bonus demo

将height: 70px;中的.container更改为：

height: 50px;
padding-top: 20px;

Answer 5

Demo垂直和水平对齐。

我使用了一个简单的网格系统来对齐所有内容 - CSS：

.grid {
    width:200px;
    height:70px;
    float:left;
}

HTML：

<div class="grid">
    <img src="http://placehold.it/16x16">
    <img src="http://placehold.it/16x16">
</div>

<div class="grid text">centered text</div>

<div class="grid">
    <img src="http://placehold.it/16x16">
    <img src="http://placehold.it/16x16">
</div>

Answer 6

我知道这可能不是一个完美的方式，但我认为这个黑客可能有所帮助：

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

.iconsleft, .iconsright, .text {   
    display:inline-block;   
    margin-top:20px;  
}   

.iconsright {  
    float: right;  
}   

.iconsleft {   
    float: left;  
}

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

CodePen

6 个答案:

Demo

Demo here

Bonus demo