没有 flexbox 的元素 CSS 的中央对齐 [英] Central align of elements CSS without flexbox

查看：20
本文介绍了没有 flexbox 的元素 CSS 的中央对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在让文本出现在网页的屏幕中间(高度方向)时遇到问题.该网站的 HTML 是:

<头><title>示例</title><link href="example.css" rel="stylesheet"><身体><div class="home-container"><div class="home-row"><div class="some-other-class"><p>应该在中间的文本</p>

</html>

我想要做的是让 home-container 元素一直延伸到页面底部，并将 应该在中间的文本 放在它的中间.我的 css 看起来像:

html, body{高度:100%；}.home-容器{宽度:100%；高度:100%；背景颜色:RGBA(139,0,0,0.4)；}.home-row{垂直对齐:中间；}

我明白，如果我像这样制作 home-container ，我想做的事情是可能的:

.home-container{宽度:100%；高度:100%；背景颜色:RGBA(139,0,0,0.4)；对齐项目:居中；显示:弹性；}

但这不适用于所有浏览器.vertical-align 属性有什么问题?在我的示例中，Id 并没有真正做任何事情...

解决方案

使用vertical-align:middle在.home上添加display:table-cell-row 和 display:table 在 .home-container

请参阅此处jsfiddle 或代码段

html,身体 {高度:100%；}.home-row {垂直对齐:中间；显示:表格单元格；}.home-容器{宽度:100%；高度:100%；背景颜色:rgba(139, 0, 0, 0.4);显示:表；}

<div class="home-row"><div class="some-other-class"><p>应该在中间的文本</p>

vertical-align CSS 属性指定行内或表格单元格框的垂直对齐方式.

在此处阅读更多信息垂直对齐

编辑 2020有一种更好的方法可以使用 flexbox

检查下面的代码片段

玩转flexbox.您可以将它添加到其他项目而不仅仅是容器

.home-container {背景:红色；显示:弹性；弹性方向:列；对齐内容:居中；高度:100vh；}

<div class="home-row"><div class="some-other-class"><p>应该在中间的文本</p>

I have a problem with getting text to appear in the middle of the screen (height-wise) on a webpage. The HTML of the site is:

<html lang="en">
    <head>
        <title>example</title>
        <link href="example.css" rel="stylesheet">
    </head>

    <body>        
        <div class="home-container">
            <div class="home-row">
                <div class="some-other-class">
                    <p>text that should be in the middle</p>
                </div>
            </div>
        </div> 
    </body>
</html>

What I want to do is have the home-container element stretch all the way to the bottom of the page, and have the text that should be in the middle in the middle of it. My css looks like:

html, body{
    height:100%;
}


.home-container{
    width: 100%;
    height: 100%;
    background-color: rgba(139,0,0,0.4);
}

.home-row{
    vertical-align: middle;
}

I understand that what I want to do is possible if I instead make home-container like so:

.home-container{
    width: 100%;
    height: 100%;
    background-color: rgba(139,0,0,0.4);
    align-items: center;
    display: flex;
}

but this doesn't work on all browsers. What am I doing wrong with the vertical-align property? Id isn't really doing anything in my example...

解决方案

to use vertical-align:middle add display:table-cellon .home-row and display:table on .home-container

see here jsfiddle or snippet

html,
body {
  height: 100%;
}



.home-row {
  vertical-align: middle;
  display: table-cell;
}

.home-container {
  width: 100%;
  height: 100%;

  background-color: rgba(139, 0, 0, 0.4);
  display: table;

}

<div class="home-container">
  <div class="home-row">
    <div class="some-other-class">
      <p>text that should be in the middle</p>
    </div>
  </div>
</div>

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

read more here vertical align

EDIT 2020 There's a better way to achieve the same result using flexbox

Check snippet below

Play around with flexbox. You can add it on other items not just the container

.home-container {
  background: red;
  display:flex;
  flex-direction: column;
  justify-content: center;
  height:100vh;
 }

<div class="home-container">
  <div class="home-row">
    <div class="some-other-class">
      <p>text that should be in the middle</p>
    </div>
  </div>
</div>

这篇关于没有 flexbox 的元素 CSS 的中央对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆