Fatal编程技术网
  • html/
  • Html 如何垂直对齐div中的元素？

Html 如何垂直对齐div中的元素？

html css

Html 如何垂直对齐div中的元素？,html,css,vertical-alignment,Html,Css,Vertical Alignment,我有一个带有两个图像的div，还有一个h1。它们都需要在div内垂直对齐，彼此相邻 其中一个图像需要位于div中的absolute 要在所有常见浏览器上工作，CSS需要什么 测试。。。 默认情况下，h1是块元素，将在第一个img之后的行上渲染，并将导致第二个img出现在块后面的行上 要阻止这种情况发生，可以将h1设置为具有内联流行为： #header > h1 { display: inline; } 至于在div中绝对定位img，您需要将包含的div设置为“已知大小”，然后才能正常

我有一个带有两个图像的
div
，还有一个
h1
。它们都需要在div内垂直对齐，彼此相邻

其中一个图像需要位于
div
中的
absolute

要在所有常见浏览器上工作，CSS需要什么


测试。。。

默认情况下，h1是块元素，将在第一个img之后的行上渲染，并将导致第二个img出现在块后面的行上

要阻止这种情况发生，可以将h1设置为具有内联流行为：

#header > h1 { display: inline; }
至于在div中绝对定位img，您需要将包含的div设置为“已知大小”，然后才能正常工作。根据我的经验，您还需要将position属性从默认值更改为-position:relative对我有效：

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
如果你能做到这一点，你可能想尝试从div.header中逐步删除height、width、position属性，以获得你想要的效果所需的最小属性

更新：

以下是一个适用于Firefox 3的完整示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>


div内的垂直定位示例
#标题>h1{显示：内联；}
#标题{边框：实心1px红色；
位置：相对；}
#abs定位的img{位置：绝对；
底部：-1em；右侧：2em；}
标题
所有这些都需要在div内垂直对齐

怎么对齐？图像顶部与文本顶部对齐

其中一个图像需要绝对定位在div中

相对于DIV的绝对位置？也许你能勾勒出你在找什么

绝对定位的步骤，以及调整
H1
元素的显示，以使图像显示在其内部。除此之外，我还要补充一点，您可以使用
垂直对齐
样式对齐图像：

#header h1 { display: inline; }
#header img { vertical-align: middle; }
…这会将标题和图像放在一起，顶部边缘对齐。存在其他对齐选项。您可能还发现，在
H1
元素中删除DIV并移动图像是有益的-这为容器提供了语义值，并且无需调整
H1
的显示：

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>
哇，这个问题很流行。它基于
垂直对齐
属性中的误解。这篇优秀的文章解释了这一点：

加文·基斯特纳

是一个很好的web工具，它可以帮助您在不同的情况下找到必要的CSS中心属性

简言之（为了防止链路腐烂）：

  • 内联元素（并且只有内联元素）可以通过
    垂直对齐：中间
    在其上下文中垂直对齐。然而，“上下文”不是整个父容器的高度，而是它们所在文本行的高度
  • 对于块元素，垂直对齐比较困难，并且在很大程度上取决于具体情况：
    • 如果内部元素可以具有固定高度，则可以将其位置设置为绝对位置，并指定其高度、边距顶部和顶部位置
    • 如果居中元素由一条直线组成，且其父元素高度固定，则只需设置容器的
      直线高度
      ，即可填充其高度。根据我的经验，这种方法非常通用
    • ……这种特殊情况还有很多
这对我很有效：

.vcontainer{
最小高度：10em；
显示：表格单元格；
垂直对齐：中间对齐；
}
使用此公式，它将始终无裂纹工作：

#外部{高度：400px；溢出：隐藏；位置：相对；}
#外部[id]{显示：表；位置：静态；}
#中间{位置：绝对；顶部：50%；}/*仅限explorer*/
#中间[id]{显示：表格单元格；垂直对齐：中间；宽度：100%；}
#内部{位置：相对；顶部：-50%}/*仅适用于资源管理器*/
/*可选：#内部[id]{位置：静态；}*/

任何文本
任何高度
任何内容，例如从数据库生成的内容
一切都垂直居中
我一位朋友的一项技术：

HTML:

这里

我使用了这个非常简单的代码：

HTML:


一些txt
呜呜呜呜
CSS:

div.ext-box{显示：表格；宽度：100%；}
div.int-box{显示：表格单元格；垂直对齐：中间；}
显然，无论您使用
.class
还是
#id
，结果都不会改变

就这样：


你到底想要什么垂直对齐
div中的一个单单元格表格处理垂直对齐，并向后兼容到石器时代

只需在div中使用一个单元格表！只需将单元格和表格的高度和宽度设置为100%，就可以使用垂直对齐

div中的一个单单元格表格处理垂直对齐，并向后兼容到石器时代

这里是另一种（响应性）方法：

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }



#样式_中心{位置：相对；顶部：50%；左侧：50%；}
#样式\中心\绝对{位置：绝对；顶部：50px；左侧：50px；}
+
几乎所有方法都需要指定高度，但通常我们没有任何高度

所以这里有一个CSS 3三行技巧，不需要知道高度

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
甚至在IE9中也支持它。

<div style="height:100px; border:1px solid;"> <p style="border:1px dotted;">I'm vertically centered.</p> </div> 
div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.element {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

<div class="outdiv">
    <div class="indiv">
        <span>test1</span>
        <span>test2</span>
    </div>
</div>