Question

我已经找到了这样做的方法，但我无法使用任何技术来解决这个问题。很抱歉，如果它很明显，但我是第一次使用HTML。

如果相关，我会在页面上显示背景图片。

在此我的标题（h1）是一系列三个跨度，具有透明背景，水平居中。

我想为（h2）使用相同的样式，但我希望将其水平居中和，同时保持跨度中的背景。目前我可以通过在中间添加一个虚拟航向（h2）来实现它，并使其真正大，以推动（现在的h3）向下。显然这并不理想。必须有一些方法可以将它放在中心，但代码安排让我感到厌烦。

编辑 ...此外，我需要文字＆＃39; ENTER＆＃39;成为一个链接。：（

任何帮助都会非常感激。感谢。

这是指向fiddle的链接这是代码......

 #container {text-align: center;}

          .inner {display: inline-block;
                position: relative;}

         .overflow {
             float: right;
             color: #ffffff;
             font: 100% "Arial Narrow", Arial;
             font-weight: light;
             font-style: italic;
             letter-spacing: 2px;
             background: rgb(0, 0, 0); /* fallback color */
             background: rgba(0, 0, 0, 0.3);
             padding: 1px;}

         .overflow2 {
             float: right;
             color: #ffffff;
             font: 700% "Arial Narrow", Arial;
             font-weight: light;
             font-style: italic;
             letter-spacing: 2px;
             background: rgb(0, 0, 0); /* fallback color */
             background: rgba(0, 0, 0, 0.0);
             padding: 100px;}

         .overflow3 {
             float: right;
             color: #ffffff;
             font: 265% "Arial Narrow", Arial;
             font-weight: light;
             font-style: italic;
             letter-spacing: 5px;
             background: rgb(0, 0, 0); /* fallback color */
             background: rgba(0, 0, 0, 0.3);
             padding: 1px;}

<h1>
    <div id="container">
        <span class="inner"></span>
        <span class="inner"><div class="overflow">&nbsp HeadingText nbsp</div></span>
        <span class="inner"></span>
     </div>
</h1>

<h2>
    <div id="container">
         <span class="inner"></span>
         <span class="inner"><div class="overflow2"></div></span>
         <span class="inner"></span>
    </div>
</h2>

<h3>
    <div id="container">
        <span class="inner"></span>
        <span class="inner"><div class="overflow3">&nbsp ENTER &nbsp</div></span>
        <span class="inner"></span>
    </div>
</h3>

Answer 1

通过在相对定位的元素内使用绝对定位，您可以垂直和水平居中。

position: absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

您可以在要居中的元素上使用此css，并在容器元素（背景图像）上使用position：relative。

示例：https://jsfiddle.net/94e8ezwn/1/

注意：不要使用具有相同ID的多个元素。 ID对于元素来说是唯一的。对于#container，请改用类。

垂直和水平对齐文本链接跨越背景图像

1 个答案: