对齐元素具有沿着垂直轴的不同水平位置，而没有硬编码 [英] Aligning elements with different horizontal position along vertical axis, without hardcoding

问题描述

我有一个包含两个元素的容器，如下所示：

 < div id =container 
< div id =button-container> 
<！ - 有时其他按钮在这部分 - > 
< input type =buttonvalue =EXIT> 
< / div> 
< h1 id =title-h1>页面标题< / h1> 
< / div> 
  

我想对齐＃button-container ＃title-h1 垂直放置，即我想让它们都在 #container div。

相反，我想把＃button-container 而＃title-h1 应水平位于 #container 的中心。

最后，我想在任何值中没有硬编码。

以下是无效的CSS（也许应该是），但它是伪代码为什么我尝试完成：

 ＃button-container {
 position：align-to-parent（left，middle ）; 
} 
＃title-h1 {
 position：align-to-parent（middle，middle）; 
} 
  

最好我想出的是硬编码按钮容器的位置这：

  #container {
 padding：5px; 
 vertical-align：middle; 
 text-align：center; 
 position：relative; 
} 
 
＃button-container {
 position：absolute; 
 left：5px; / *因为填充对它没有影响* / 
 top：33％; / *不很有弹性* / 
 display：inline-block; 
} 
 
＃title-h1 {
 display：inline-block; 
} 
  

JSFiddle

我如何做到这一点，使其更具弹性，相对于各种容器和字体的大小？

解决方案

对于完全动态垂直居中，可以使用CSS设置 $ c>到 50％，然后使用CSS3 transform-translate属性将元素偏移其高度的一半。例如：

 ＃button-container {
 position：absolute; 
 top：50％; 
 -webkit-transform：translateY（-50％）; 
 -moz-transform：translateY（-50％）; 
 transform：translateY（-50％）; 
} 
  

这里有一个jsFiddle演示： http://jsfiddle.net/6hku6gdo/

如果您不想使用翻译，提供你知道元素的高度，你可以设置一个负边距。除非元素的高度可能改变，否则我倾向于使用此方法。

 ＃button-container {
 position：absolute; 
 top：50％; 
 margin-top：-20px; / *假设高度为40px * / 
} 
  

display：inline-block 和 text-align：center ，或使用与上述类似的方法使用 left：50％并设置负边距，或使用供应商前缀的 translateX（-50％）属性。 >

I have a container with two elements, like so:

<div id="container">
    <div id="button-container">
        <!-- sometimes other buttons as well in this part -->
        <input type="button" value="EXIT">
    </div>
    <h1 id="title-h1">Page Title</h1>
</div>

I want to align the #button-container vertically with the #title-h1 - that is, I want them both to be in the vertical center of the #container div.

In contrast, I want the #button-container to be pushed to the left edge, while the #title-h1 should be in the center of the #container horizontally.

And finally, I want to do this without hardcoding in any values.

The following is not valid CSS (maybe it should be) but it's pseudo code for what I'm trying to accomplish:

#button-container {
    position: align-to-parent(left, middle);
}
#title-h1 {
    position: align-to-parent(middle, middle);
}

The best I could come up with was hardcoding the position of the button container like this:

#container {
    padding: 5px;
    vertical-align: middle;
    text-align: center;
    position: relative;
}

#button-container {
    position: absolute;
    left: 5px; /* since the padding has no effect on it */
    top: 33%; /* not very resilient */
    display: inline-block;
}

#title-h1 { 
    display: inline-block;
}

JSFiddle

How can I do this so that it's more resilient with respect to the sizes of the various containers and fonts?

解决方案

For completely dynamic vertical centering, you can use CSS to set the top of the element to 50%, then use the CSS3 transform-translate properties to offset the element by half of it's height. For example:

#button-container {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

And here's a jsFiddle demo: http://jsfiddle.net/6hku6gdo/

If you don't want to use translates, providing you know the height of the element, you can set a negative margin instead. I would tend to use this method, unless the height of the element is likely to change.

#button-container {
    position: absolute;
    top: 50%;
    margin-top: -20px; /* assuming the height is 40px */
}

For centering horizontally, you could use display: inline-block and text-align: center, or use a similar method as above by using left: 50% and setting a negative margin, or using the vendor-prefixed translateX(-50%) properties.

这篇关于对齐元素具有沿着垂直轴的不同水平位置，而没有硬编码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！