当前位置： 文江博客话题详情

使用 CSS 3 垂直对齐

发布于 2024-10-25 05:31:49 字数 41 浏览 5 评论 0原文

使用CSS 3，有什么方法可以垂直对齐块元素吗？你有例子吗？ 谢谢。

原文

With CSS 3, are there any way to vertically align an block element? Do you have an example?
Thank you.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（8）

吃→可爱长大的 2024-11-01 05:31:49

最近正在研究这个问题，并尝试过：

HTML:

<body>
    <div id="my-div"></div>
</body>

CSS:

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Here's the Fiddle:

http://jsfiddle.net/ sTcp9/6/

它甚至可以在使用“宽度/高度：自动”代替固定尺寸时工作。
在 Firefox、Chrome 和 IE 的最新版本上进行了测试 (*喘气*)。

Was looking at this problem recently, and tried:

HTML:

<body>
    <div id="my-div"></div>
</body>

CSS:

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Here's the Fiddle:

http://jsfiddle.net/sTcp9/6/

It even works when using "width/height: auto", in the place of fixed dimensions.
Tested on the latest versions on Firefox, Chrome, and IE (* gasp *).

回复 原文
羁客 2024-11-01 05:31:49

注意：此示例使用草稿版本灵活盒子布局模块。它已被不兼容的现代规范取代。

将子元素居中通过同时使用 box-align 和 box-pack 属性来创建 div 框。

例子：

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}

Note: This example uses the draft version of the Flexible Box Layout Module. It has been superseded by the incompatible modern specification.

Center the child elements of a div box by using the box-align and box-pack properties together.

Example:

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}
回复 原文
薄凉少年不暖心 2024-11-01 05:31:49

使用 Flexbox：

<style>
  .container {
    display: flex;
    align-items: center; /* Vertical align */
    justify-content: center; /* Horizontal align */
  }
</style>

<div class="container">
  <div class="block"></div>
</div>

垂直（和水平）将 container 内的 block 居中。

浏览器支持：http://caniuse.com/flexbox

Using Flexbox:

<style>
  .container {
    display: flex;
    align-items: center; /* Vertical align */
    justify-content: center; /* Horizontal align */
  }
</style>

<div class="container">
  <div class="block"></div>
</div>

Centers block inside container vertically (and horizontally).

Browser support: http://caniuse.com/flexbox

回复 原文
用心笑 2024-11-01 05:31:49

有几种方法：

1。绝对定位——您需要声明高度才能完成此操作：

<div>
   <div class='center'>Hey</div>
</div>

div {height: 100%; width: 100%; position: relative}
div.center {
     width: 100px;
     height: 100px;
     top: 50%;
     margin-top: -50px;
}

*2。使用display: table http://jsfiddle.net/B7CpL/2/ *

<div>
     <img src="/img.png" />
     <div class="text">text centered with image</div>
</div>


div {
     display: table;
     vertical-align: middle
}

div img,
div.text {
     display: table-cell;
     vertical-align: middle
}
  1. 使用display的更详细教程：表

http://css-tricks.com/vertically-center-multi-lined-text/< /a>

a couple ways:

1. Absolute positioning-- you need to have a declared height to make this work:

<div>
   <div class='center'>Hey</div>
</div>

div {height: 100%; width: 100%; position: relative}
div.center {
     width: 100px;
     height: 100px;
     top: 50%;
     margin-top: -50px;
}

*2. Use display: table http://jsfiddle.net/B7CpL/2/ *

<div>
     <img src="/img.png" />
     <div class="text">text centered with image</div>
</div>


div {
     display: table;
     vertical-align: middle
}

div img,
div.text {
     display: table-cell;
     vertical-align: middle
}
  1. A more detailed tutorial using display: table

http://css-tricks.com/vertically-center-multi-lined-text/

回复 原文
笑，眼淚并存 2024-11-01 05:31:49

有一种简单的方法可以在 css 中垂直和水平对齐 div。

只需为您的 div 设置高度并应用此样式

.hv-center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

希望这会有所帮助。

There is a simple way to align vertically and horizontally a div in css.

Just put a height to your div and apply this style

.hv-center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

Hope this helped.

回复 原文
焚却相思 2024-11-01 05:31:49

我总是使用本文中的教程来中心化内容。太棒了

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

基本规则是：

  1. 使容器相对定位，这声明它是绝对定位元素的容器。
  2. 使元素本身绝对定位。
  3. 将其放在容器的中间位置，并标明“顶部：50%”。 （请注意，此处的 50%' 表示容器高度的 50%。）
  4. 使用平移将元素向上移动其自身高度的一半。 （“translate(0, -50%)”中的“50%”指的是元素本身的高度。）

I always using tutorial from this article to center things. It's great

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

The essential rules are:

  1. Make the container relatively positioned, which declares it to be a container for absolutely positioned elements.
  2. Make the element itself absolutely positioned.
  3. Place it halfway down the container with 'top: 50%'. (Note that 50%' here means 50% of the height of the container.)
  4. Use a translation to move the element up by half its own height. (The '50%' in 'translate(0, -50%)' refers to the height of the element itself.)
回复 原文
笑忘罢 2024-11-01 05:31:49

试试这个也能完美工作：

html:

   <body>
    <div id="my-div"></div>
   </body>

css:

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    display: table-cell;
    vertical-align: middle

}

Try this also work perfectly:

html:

   <body>
    <div id="my-div"></div>
   </body>

css:

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    display: table-cell;
    vertical-align: middle

}
回复 原文
傾城如夢未必闌珊 2024-11-01 05:31:49

您可以通过设置要显示的元素：inline-block，然后设置vertical-align：middle;来垂直对齐；

You can vertically align by setting an element to display: inline-block, then setting vertical-align: middle;

回复 原文
~没有更多了~

关于作者

我的黑色迷你裙

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Promise

文章 0 评论 0

qq_lbRlsh

文章 0 评论 0

待＂谢繁草

文章 0 评论 0

yy2010hell

文章 0 评论 0

漫无边际

文章 0 评论 0

傲娇萝莉攻

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文