如何在父横幅图像中垂直居中页面标题文本？

-1

我为我的网站的每个页面都有一个页面标题，默认情况下它放在该页面的标题图像中。我制定了以这些页面标题为中心的解决方案，但代码实现在页面之间不一致。最大的问题在于移动设备的中心位置，在这个位置页面之间可能会变得有点怪异。我用这个规则之前居中文本，但它根据设备屏幕的宽度会导致不一致：如何在父横幅图像中垂直居中页面标题文本？

@media screen and (max-width: 769px) { #banner-area { padding-top: 85px; }}

实际上，这推送内容到手机上的屏幕尺寸正确的位置。但是，这看起来有点“哈克”，不雅。我后来转向到平移Y属性，制定此代码中心垂直文本：

/* Page 1 */ 

@media screen and (max-width: 769px) { #page-title { transform: translateY(-30px); }} 
@media screen and (min-width: 770px) { #page-title { transform: translateY(10px); }} 

/* Pages 2 through 7 */ 

#page-title { transform: translateY(50%); } /* or below... */ 
@media screen and (min-width: 770px) { #page-title { transform: translateY(50%); }}

对应的HTML：

<div id="banner-area"> 
    <div id="page-title">

这是写一个垂直居中这个CSS规则的正确方法，或者可以有其他人提供更好的解决方案？它让我感到害怕，即页面1有其自己的一套规则，其余的规则在实现居中效果方面或多或少是相同的。一些能够让我摆脱横幅区域填充黑客的东西会很棒 - 我需要一个适用于多种设备屏幕尺寸的统一规则。

谢谢！

泰勒

来源

2017-05-16 TCharb

你有HTML和CSS您现在正在使用？ –

我不完全有权访问网站模板的HTML（使用Squarespace），而无需使用DevTools/Web Inspector。父元素是＃banner-area，孩子是＃page-title – TCharb

添加了非常基本的HTML。对于CSS中使用的选择器没有太大的影响，关于 – TCharb

你的问题有点含糊，并没有适当的HTML和CSS，我们不能给你，你可能想要的答案。但是，如果我理解正确的话，这是你所追求的：

#page-title { 
    margin-top: 50%; 
    transform: translateY(-50%); 
}

或

parent { 
    position: relative; 
} 

#page-title { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
}

随着变换％指的不是父母的大小到div的大小。再次

parent { 
    display: flex; 
    align-itens: center; // Vertical 
    justify-content: center; // Horizontal 
}

，没有上下文，很难说哪个这些是最好的解决方案，如果有的话：

或者你可以在父元素上使用Flexbox的。

来源

2017-05-16 19:21:00

这个问题记住第一个，第二个解决方案不是特别在androids中跨浏览器。 –

@abdallaarbab为什么不呢？在所有现代浏览器上，变换都可以很好地工作。 –

http://caniuse.com/#search=translate。我不是说这些方式不起作用。我在说flex盒子是跨浏览器的中心东西的未来。 http://caniuse.com/#search=align-items http：// caniuse。com /＃search = justify-content –

您可以按照这些： HTML：

<div class="page-title"> 
    <h2>Page Title</h2> 
</div>

的CSS：

.page-title{ 
    display: flex; 
    align-items:center; 
    background-color: #fafafa; 
    height: 300px; 
}

来源

2017-05-16 19:26:49

这个align-items属性是垂直，水平还是两者对齐相应的标题？ – TCharb

align-items：center;垂直对齐相应标题以使其居中水平居中：justify-content：center; –

如何在父横幅图像中垂直居中页面标题文本？

回答

相关问题