1

我想要一个具有设定宽度和高度的容器。在那个容器中，我有：

  • 垂直和水平居中的文本

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

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

我的测试代码：

.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

代码笔

4

6 回答 6

4

我尽量避免浮动：

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

我做的事情：

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

演示

如果您希望图标转到一侧，您应该告诉他们float朝那个方向。

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

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

.iconsleft, .iconsright {
  display:block;
}

.iconsright {
  float: right;
}
.iconsleft {
  float: left;
}
于 2013-08-03T23:27:50.523 回答
0

text-align: center需要在父块上设置，而不是在中心块上，如果你有display: inline-block.

vertical-align:middle;也不会对你有任何好处，除非你在一个表格单元格（或一个样式类似的 div）中。如果您想在 IE7+ 上“真正”垂直居中，请使用好的 ol' 表，与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>
于 2013-08-03T23:24:46.323 回答
0

只需左右浮动两个side ，在HTML结构<div>中将right放在center<div>之前。<div>

演示在这里

<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>

通过更改容器高度并为其提供一些底部填充，您可以使整个盒子垂直居中。

奖金演示

改成height: 70px;这样.container：

height: 50px;
padding-top: 20px;
于 2013-08-03T23:30:22.387 回答
0

垂直和水平对齐的演示。

我使用了一个简单的网格系统来对齐所有内容 - 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>
于 2013-08-03T23:49:47.850 回答
0

我知道这可能不是完美的方法，但我认为这个 hack 可能会有所帮助：

.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;  
}
于 2013-08-04T00:36:26.657 回答