logo标签列表

CSS - 水平和垂直分布divs

cssalignmentvertical-alignmenttext-align
3

我有一个包含三个元素的标题。

我想要的基本上是这样:

http://jsfiddle.net/zktbfmqo/2/

每个div中的内容也需要垂直居中。

有没有一种简单聪明的方法可以做到这一点，而不使用绝对定位等呢？ vertical-align: middle似乎没什么用，但该属性有时也不易操作。

HTML:

<div id="container">
    <div class="box1">Text</div>
    <div class="box2">Text</div>
    <div class="box3">Text</div>
    <span class="stretch"></span>
</div>

CSS（层叠样式表）：
#container {
    border: 2px dashed #444;
    height: 125px;

    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    min-width: 612px;
}

.box1, .box2, .box3 {
    width: 150px;
    height: 125px;
    vertical-align: middle;
    display: inline-block;
    *display: inline;
    zoom: 1;
    text-align: center;
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}
4个回答
2

首先，您可以使用Flexbox以更好的方式实现相同的结果。

要将文本垂直居中，您可以通过添加line-height属性并将其设置为容器div的完全相同高度来简单解决这个问题，在您的情况下，它将是125px，或者如果您使用Flexbox，则可以使用align-items: center完成，以下是最终代码：

.wrapper {
display: -webkit-flex;
display: flex;

-webkit-flex-flow: row nowrap; /* Safari 6.1+ */
flex-flow: row nowrap;

-webkit-justify-content: space-between; /* Safari 6.1+ */
justify-content: space-between;
  
font-weight: bold;

height: 125px;
min-width: 612px;
padding: 5px;

border: 2px dashed #444;
}

.wrapper > div{
display: -webkit-flex;
display: flex;
-webkit-flex-basis: 150px;
flex-basis: 150px;
justify-content: center;
align-items: center;

}
.aside-1, .aside-3{
background: #ccc
}
.aside-2{
background: #0ff;
}
<div class="wrapper">
   <div class="aside aside-1">text1</div>
   <div class="aside aside-2">text2</div>
   <div class="aside aside-3">text3</div>
</div>

我尝试了一个针对IE9等浏览器的flexbox polyfill。虽然还没有测试，但flexbox确实很棒 :) - Kenny Bones
1
你可以使用 display:table/table-cell 并通过使用 border-collapse/spacing + margin 的解决方法来获得所需的输出。 

#wrap {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  overflow:hidden;
  /* just for demo */
  width: 612px;
}
#container {
  margin: 0 -81px; /*must be equal to border-spacing */
  
}
#table {
  display: table;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 81px 0;
  width: 100%;
}
.box1,
.box2,
.box3,
.box4 {
  width: 150px;
  height: 125px;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
}
.stretch {
  width: 100%;
  vertical-align: middle;
  display: table-cell;
}
.box1,
.box3 {
  background: #ccc
}
.box2,
.box4 {
  background: #0ff
}
<div id="wrap">
  <div id="container">
    <div id="table">
      <div class="box1">Text</div>
      <div class="box2">Text</div>
      <div class="box3">Text</div>
      <span class="stretch"></span>
    </div>
  </div>
</div>

1

Flexbox来解救！

好的资源：

https://philipwalton.github.io/solved-by-flexbox/

https://github.com/philipwalton/flexbugs

#container {
    display: flex; /* magic maker */
    justify-content: space-between; /* set equal space between boxes */
    border: 2px dashed #444;
    height: 125px;
    
    /* just for demo */
    min-width: 612px;
}

.box1, .box2, .box3, .box4 {
    display: flex; /* magic maker */
    /*  
        shorthand for flex-grow, flex-shrink, and flex-basis properties
        we don't want the boxes to grow or shrink, and the basis is the explicit
        width we want them
    */
    flex: 0 0 150px;
    justify-content: center; /* horizontally center text within */
    align-items: center; /* vertically center text within */
    height: 125px;
}

.box1, .box3 {
    background: #ccc
}
.box2, .box4 {
    background: #0ff
}
<div id="container">
    <div class="box1">Text</div>
    <div class="box2">Text</div>
    <div class="box3">Text</div>
</div>

阅读 OP 的代码，我认为 OP 想要支持旧版浏览器，因此在这种情况下 flexbox 可能不是一个好的解决方案。 - dippas
1

您是否熟悉Bootstrap？

它是由Twitter制作的CSS框架。

将此放置在头部 - 

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
</head>

在你的页面中使用它，以查看它的功能，有很好的文档可以参考。

<div class="container"> <!-- Creates margin -->
  <div class="row"> <!-- Read docs on rows, they're awesome! -->
    <div class="col-lg-4">   <!-- 1 -->
      <!-- Just to take up space -->
    </div>
    <div class="col-lg-4">   <!-- 2 -->
      <!-- YOUR CONTENT GOES HERE -->
    </div>
    <div class="col-lg-4">  <!-- 3 -->
    <!-- Just to take up space -->
    </div>
  </div> <!-- ./row -->
</div> <!-- ./container -->

现在，在第二个./col-lg-4 div中，所有内容都将完美地居中于屏幕上，并且文本左对齐。如果您想将文本居中对齐，请替换
<div class="col-lg-4"> <!-- 2 -->

使用

<div class="col-lg-4 text-center"> <!-- 2 -->

希望这有所帮助！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接