Question

试图在另一个div中垂直居中3个div，无论我尝试什么都行不通。

我的HTML：

<body class="mainBackground">
<header class="wrap">
    <div class="menuIcon">Menu Icon</div>
    <div class="pageTitle">Good morning, John Doe</div>
    <div class="logo">Logo</div>
    </div>
</header>
</body>

我的CSS：

.wrap {
    height: 41px;
    background-color: gray;
    width: calc(100% - 34px);
    margin: 17px auto;
}
.menuIcon {
    display: table-cell;    
    float: left;
    vertical-align: middle;
}
.logo {
    float: right;
}
.pageTitle {
    text-align: center;
    vertical-align: middle;
}

菜单图标实际上是一个小的SVG图标，固定大小约为~28px。右侧的徽标也有固定的大小，大约是菜单图标高度的两倍。我已经为这些图像使用了放置的文本。中间的文本必须在浏览器画布中水平居中（不是它所在的div）。

我唯一需要做的就是使用尽可能少的硬编码像素大小。所以我的终端设计必须遵循像素的psd，但必须尽可能以百分比编码。我想坚持使用width：calc（100％ - 34px），如果可能的话，因为这让我用数学来确定div大小。这意味着没有使用px来垂直居中 - 我需要使用百分比来垂直居中div中的这些项目，因为它们将来会改变，我不能回去调整它们以确保它们总是居中在高度是不同的（如菜单图标或徽标）。必须使用IE9 - 不关心其他浏览器。

非常感谢任何帮助！

Answer 1

如果没有display: table-cell;和display: table;，您就无法使用display: table-row;，而且表格单元格也无法浮动。 this is更新了小提琴，这是你要找的吗？有关居中的更多信息，请访问css-tricks.com

HTML

<header class="wrap">
    <div class="row">
        <div class="menuIcon">Menu Icon</div>
        <div class="pageTitle">Good morning, John Doe</div>
        <div class="logo">Logo</div>
    </div>
</header>

CSS

.wrap {
    height: 41px;
    background-color: gray;
    width: calc(100% - 34px);
    margin: 17px auto;
    display: table;
}
.row {
    display: table-row;
}
.menuIcon {
    display: table-cell;    
    vertical-align: middle;
}
.logo {
    display: table-cell;
    vertical-align: middle;
}
.pageTitle {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

Answer 2

试试这个：

＆＃13;

.wrap {
    height: 41px;
    background-color: gray;
    text-align:center;
    width: calc(100% - 34px);
    margin: 17px auto;
}
.menuIcon {
      
    float: left;
   line-height: 41px;
}
.logo {
    float: right;
    line-height: 41px;
}
.pageTitle {
    text-align: center;

    display:inline-block;
    line-height: 41px;
}

＆＃13;

<body class="mainBackground">
    <header class="wrap">
        <div class="menuIcon">Menu Icon</div>
        <div class="pageTitle">Good morning, John Doe</div>
        <div class="logo">Logo</div>
        </div>
    </header>
</body>

＆＃13;

Answer 3

您只需将行高应用于 .wrap 内的 DIV＆＃39> 。行高属性属性值应等于 .wrap 的高度，以获得最大结果。

您可以单独为它们添加行高，但下面的代码块就是这样。

  .wrap  > div {
        line-height: 41px;
        display: inline;
        margin: 0 10px 0 50px;
}

＆＃13;

.wrap {
    height: 41px;
    background-color: gray;
    width: calc(100% - 34px);
    margin: 17px auto;
    margin-top: 60px; /* Just for my presentation */
}

.wrap  > div {
    line-height: 41px;
    display: inline-block;
    margin: 0 10px 0 50px; /* Adjust to suit your need */
}


.menuIcon {
    display: table-cell;    
    float: left;
    vertical-align: middle;
}
.logo {
    float: right;
}
.pageTitle {
    text-align: center;
    vertical-align: middle;
}

＆＃13;

<header class="wrap">
        <div class="menuIcon">Menu Icon</div>
        <div class="pageTitle">Good morning, John Doe</div>
        <div class="logo">Logo</div>
       
    </header>

＆＃13;

Answer 4

看看这个问题：Vertical alignment of elements in a div

这个小提琴特别有用：http://jsfiddle.net/techsin/FAwku/1/

取自对链接问题的评论所提供的解决方案中的解决方案：

<div class="top6">
    <div class="in6">6</div>
    <div class="in6"></div>
    <div class="in6"></div>
</div>

.top6 {background-color: blue; height: 100px; display:flex; align-items: center;}
.in6 {background-color: yellow; width: 30px; height: 30px; margin-right: 5px; }

div中的垂直居中文本/图像不起作用

4 个答案: